CSS盒子模型

（一）盒子模型从上到下分为五层：

• 边框（border），位于盒子的第一层。
• 元素内容（content）、内边距（padding），两者同位于第二层。
• 背景图（background-image），位于第三层。
• 背景色（background-color），位于第四层。
• 整个盒子的外边距（margin），位于第五层。
  几个重要的参数：margin、padding、border、content

---

（二）W3C 盒子模型

IE 盒子模型和标准 W3C 盒子模型对比 **不同 **的是：IE 盒子模型的 content 部分包含了 border 和 pading，如下图：

W3C盒子模型与IE盒子模型对比.png

标准 W3C 盒子模型

• 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

IE 盒子模型

• 总宽度 = margin-left + width + margin-right

那应该选择哪中盒子模型呢？

• 当然是“标准 W3C 盒子模型”了。就是在网页的顶部加上 DOCTYPE 声明，所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

• NOTE：如果不加 DOCTYPE 声明，那么各个浏览器会根据自己的行为去理解网页，即 IE 浏览器会采用 IE 盒子模型去解释你的盒子，而 FF 会采用标准 W3C 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。

---

（三）CSS 外边距合并

• 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
• 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

①当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。如下图所示：

②当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和 / 或下外边距也会发生合并。如下图所示：

③外边距甚至可以与自身发生合并。假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

④如果这个外边距遇到另一个元素的外边距，它还会发生合并：

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

那怎么解决这个问题呢？——戳下面的链接
转：http://www.jianshu.com/p/caf9b884218d