（一）盒子模型從上到下分為五層：
- 邊框（border），位于盒子的第一層。
- 元素內(nèi)容（content）、內(nèi)邊距（padding），兩者同位于第二層。
- 背景圖（background-image），位于第三層。
- 背景色（background-color），位于第四層。
-
整個(gè)盒子的外邊距（margin），位于第五層。
幾個(gè)重要的參數(shù)：margin、padding、border、content
（二）W3C 盒子模型
IE 盒子模型和標(biāo)準(zhǔn) W3C 盒子模型對(duì)比 **不同 **的是：IE 盒子模型的 content 部分包含了 border 和 pading，如下圖：
標(biāo)準(zhǔn) W3C 盒子模型
- 總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
IE 盒子模型
- 總寬度 = margin-left + width + margin-right
那應(yīng)該選擇哪中盒子模型呢？
當(dāng)然是“標(biāo)準(zhǔn) W3C 盒子模型”了。就是在網(wǎng)頁的頂部加上 DOCTYPE 聲明，所有瀏覽器都會(huì)采用標(biāo)準(zhǔn) W3C 盒子模型去解釋你的盒子，網(wǎng)頁就能在各個(gè)瀏覽器中顯示一致了。
NOTE：如果不加 DOCTYPE 聲明，那么各個(gè)瀏覽器會(huì)根據(jù)自己的行為去理解網(wǎng)頁，即 IE 瀏覽器會(huì)采用 IE 盒子模型去解釋你的盒子，而 FF 會(huì)采用標(biāo)準(zhǔn) W3C 盒子模型解釋你的盒子，所以網(wǎng)頁在不同的瀏覽器中就顯示的不一樣了。
（三）CSS 外邊距合并
- 外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。
- 合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
①當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。如下圖所示：
②當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和 / 或下外邊距也會(huì)發(fā)生合并。如下圖所示：
③外邊距甚至可以與自身發(fā)生合并。假設(shè)有一個(gè)空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并：
④如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并：
這就是一系列的段落元素占用空間非常小的原因，因?yàn)樗鼈兊乃型膺吘喽己喜⒌揭黄穑纬闪艘粋€(gè)小的外邊距。
那怎么解決這個(gè)問題呢？——戳下面的鏈接
轉(zhuǎn)：http://www.lxweimin.com/p/caf9b884218d
