04. CSS 盒模型（Box Model）
盒模型
边框 - border
CSS 轮廓
内边距 - padding
外边距 - margin
垂直外边距合并现象
CSS3盒子 & IE6盒子
一、盒模型
CSS 盒子模型图：
#box{
width:200px;
height:100px;
padding:20px;
border:10px solid blue;
margin:30px;
}
- ID 为 box 的宽为 200 像素，高为 100 像素，内边距为 20 像素，边框为 10 像素，外边距是 30 像素
-
那么该元素的总宽度实际为：30+10+20+200+20+10+30= 320px
-
实际高度为：30+10+20+100+20+10+30= 220px
二、边框 - border
(1) 边框宽度：
border-width : px;
(2) 边框样式：
border-style : solid/dashed/dotted/double;
/*
- solid：实线
- dashed：虚线
- dotted：点线
- double：双实线
*/
(3) 边框颜色：
border-color : rgb();
(4) 边框综合设置：
border : width style color;
(5) 单边边框：
border-top/right/bottom/left-属性:值;
/* 单独设置某一边，设置方式与border同理 */
(6) 圆角边框：
border-radius : 左上角半径px 右上角半径px 右下角半径px 左下角半径px;
三、CSS 轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
CSS outline 属性规定元素轮廓的样式，颜色和宽度。该属性和 border 属性一样，同为复合属性，不同的是 border 属性作用于内容和内边距外围，而 outline 属性作用于 border 属性外围。轮廓也可以叫做外边框。
实例：在 div 元素的外围绘制一条边框，再给边框绘制一条轮廓
<head>
<style>
#box{
border:2px solid red;
outline:4px dotted green;
}
</style>
</head>
<body>
<div id="box">
内容
</div>
</body>
①、 outline-width 设置或检索对象外的线条轮廓的宽度。
②、outline-style 设置或检索对象外的线条轮廓的样式。
③、outline-color 设置或检索对象外的线条轮廓的颜色。
四、内边距 - padding
(1) 内边距：
padding : top-px right-px bottom-px left-px
(2) 单边内边距：
padding-top/right/bottom/left : px
五、外边距 - margin
(1) 外边距：
margin:top-px right-px bottom-px left-px;
(2) 单边外边距：
margin-top/right/bottom/left : px;
border/padding/margin综合设置提示：
- 可设置四个参数，分别对应top-right-bottom-left，顺时针遍历设置；
- 若只设置了1个value，则top=right=bottom=left=value；
- 若只设置了2个value，则top=val_1,right=val_2,bottom=val_1,left=val_2；顺时针遍历赋值；
- 若只设置了3个value，则top=val_1,right=val_2,bottom=val_3,left=val_1；顺时针遍历赋值；
- border-radius半径设置顺序：左上-右上-右下-坐下；顺时针遍历；
页面上元素居中显示：margin:0 auto;
-
上下的margin为0，左右的margin都尽可能的大，于是就居中了
-
使用 margin:0 auto;的盒子，必须有width，有明确的width。（可以这样理解，如果没有明确的witdh，那么它的witdh就是霸占整行，没有意义）
-
只有标准流的盒子，才能使用 margin:0 auto;居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用 margin:0 auto;
六、垂直外边距合并现象
(1) 相邻盒子垂直外边距合并，margin合并取最大值；
- 解决方案：只设置一个margin；
(2) 嵌套盒子垂直外边距合并
-
解决方案①：
overflow:hidden； -
解决方案②：使用
border，padding；
添加 border 后：
七、CSS3盒子 & IE6盒子
- IE6框模型：
box-sizing:content-box
IE6框的大小：【width+左右padding+左右border+左右margin】
×【height+上下padding+上下border+上下margin】
- CSS3框模型：
box-sizing:border-box
CSS3框的大小：【width+左右margin】×【height+上下margin】
- CSS3盒的[width&height]包含[padding+border]
八、兼容性问题
(1) 善于使用父亲的padding，而不是儿子的margin:
我们尝试通过给儿子 p 一个 margin-top:50px; 的属性，让其与父亲保持30px的上边距，结果却看到了下面的奇怪的现象：
此时我们给父亲div加一个border属性，就正常了：
浙公网安备 33010602011771号