一、盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
二、边框
（1）语法：
border : border-width || border-style || border-color
（2）设置边框样式（border-style）：
边框样式用于定义页面中边框的风格，常用属性值如下：
- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为虚线
- dotted：边框为点线
- double：边框为双实线
（3）合并相邻边框：
border-collapse:collapse;
三、内边距
padding属性用于设置内边距。是指边框与内容之间的距离。
- padding-top:上内边距
- padding-right:右内边距
- padding-bottom:下内边距
- padding-left:左内边距
综合写法：
注意：padding 会撑开 带有 width和height盒子 ！！！
四、外边距
（1）概述
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
- margin-top:上外边距
- margin-right:右外边距
- margin-bottom:下外边距
- margin-left:上外边距
- margin:上外边距 右外边距 下外边距 左外边
（2）外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足一下两个条件：
1、必须是块级元素。
2、盒子必须指定了宽度（width）
然后就给左右的外边距都设置为auto，就可使块级元素水平居中。
.header{
width:960px;
margin:0 auto;
}
（3）清除元素的默认内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
（4）相邻块元素垂直外边距的合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
（5）嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：
可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加overflow:hidden。
（6）content宽度和高度
使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。
大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：
注意：
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
3、如果一个盒子没有给定宽度或者继承父亲的宽度，则padding 也会影响本盒子大小。
（7）盒子模型布局稳定性
按照优先使用宽度（width），其次使用内边距（padding），再次外边距（margin）。
width > padding > margin
原因：
margin会有外边距合并，还有ie6下面margin加倍的bug，所以最后使用。
padding会影响盒子大小，需要进行加减计算，其次使用。
width没有问题，我们经常使用宽度剩余法、高度剩余法来做。