一、盒子模型组成
盒子模型的组成有4部分组成：元素(内容)、内边距、外边距、边框。
<img src="media/box.gif" width="700" />
下面分别介绍这4部分。
1.1 边框(border)
语法：
border (宽度, 线类型(虚线/实线) 边框颜色);
举例：
/* 设置底部边框：1像素粗度,实线,灰色 */
border-bottom: 1px solid #ccc;
1)border类型：
- border-top(上边框)
- boder-bottom(下边框)
- boder-left(左边框)
- boder-right(右边框)
2)线类型
- solid(实线)
- dashed(虚线)
- dotted(点线)
1.2 内边距(padding)
语法：
padding 像素值;
示例：
/* 设置内边距15px */
padding: 15px;
padding类型
- padding-top
- padding-bottom
- padding-left
- padding-right
注意:
- 增加内边距会撑大盒子,使盒子的总高(宽)度增加。
- 如果不指定盒子的宽度,那么增加内边距,不会影响盒子的总宽度。如果要在宽度上增加内边距,如果不指定盒子宽度,则盒子的宽度将不会改变。
1.3 外边距(margin)
语法：
margin 像素值;
示例：
margin: 15px;
margin类型
- margin-top
- margin-bottom
- margin-left
- margin-right
二、盒子的特性
2.1 盒子的高度
高度(宏观上看这个盒子) = 内容的高度 + 内边距(下) + 内边距(上) + 边框(下) + 边框(上) 。
2.2 盒子的宽度
宽度(宏观上看这个盒子) = 内容的宽度 + 内边距(左) + 内边距(右) + 边框(左) + 边框(右) 。
2.3 盒子居中
2.3.1 盒子内容水平居中
1)文本文字
text-align: center。
2)盒子
设置子盒子的左右外边框(margin)为auto。
2.3.2 盒子内容垂直居中
1) 文本文字
让文字的行高等于盒子高即可。
2)背景图片
设置背景图片的位置属性,Y轴上center。
2.4 外边距塌陷和合并
2.4.1 外边距塌陷
<img src="media/www.png" />
目标：
A和B150px。
做法：
两个div垂直盒子布局,上面的盒子A和下面的盒子B。如果设置,A的margin-bottom=100px;
B的margin-top=50px。那么A和B的实际距离等于100px。原则即为取两个盒子外边距距离最大的为最后结果。
解决：
尽量避免。设置A的margin-bottom 150px。或者 B的margin-top=150px
2.4.2 外边框合并
<img src="media/n.png" />
对于两个嵌套盒子。如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：
- 可以为父元素定义1像素的上边框或上内边距。
- 可以为父元素添加overflow:hidden。
