盒子模型

盒子模型

1、一个盒子我们会分成几个部分：

• 内容区（content）
• 内边距（padding）
• 边框（border）
• 外边距（margin）

2、边框的三个重要的条件：

border-width: 10px;   边框的宽度
 -border-width: 10px 20px 30px 40px如果是四个值的话，顺序是上右下左
 -border-width: 10px 20px 30px 如果是三个值的话，顺序是上，左右一样，下
 -border-width: 10px 20px  如果是两个值的话，上下一样，左右一样

border-color: red;    边框的颜色
border-style: solid(实线);  边框的样式

3、边框的样式

• none（没有边框）
• dotted（点线）
• dashed（虚线）
• solid（实线）
• double（双线）
• groove（槽线）
• ridge（脊线）
• inset（凹边）
• outset（凸边）

4、内容区
通过width和height两个属性设置内容区的大小
width和height属性只适用于块元素

5、边框
可以使用border属性来设置盒子的边框：

• border:1px red solid;
• 上边的样式分别指定了边框的宽度、颜色和样式。

格式  .box{
			width: 200px;
			height: 200px;
			background-color: #bfa;
			border-width: 10px;    边框宽度
			border-color: red;     边框颜色
			border-style: solid;   边框样式
			border:red solid 10px; 简写方式
			border-right: none;    取消右边框
		}

也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。
和padding一样，默认width和height并包括边框的宽度

5、内边距

.box1{
			width: 200px;
			height: 200px;
			background-color: #bfa;
			padding-top: 100px;    上内边距100像素
			padding-right: 100px;   右内边距100像素
			margin-top: 100px;     上外边距100像素
		}

使用padding属性来设置元素的内边距
默认情况下width和height不包含padding的大小
例如：

• padding:10px 20px 30px 40px
• 这样会设置元素的上、右、下、左四个方向的内边距。

指定位置内边距：

• padding:10px 20px 30px;
• 分别指定上、左右、下四个方向的内边距
• padding:10px 20px;
• 分别指定上下、左右四个方向的内边距
• padding:10px;
• 同时指定上左右下四个方向的内边距
• 同时在css中还提供了padding-top、padding-right、padding-
• right、padding-bottom分别用来指定四个方向的内边距。

6、外边距
相邻的垂直的外边距会重叠，取最大值
如果父子元素垂直外边距相邻了，那么子元素的外边距就会传给他的父元素，可以给父元素设置1像素的内边距或者外边距或者用overflow:hidden;