（一）盒子模型從上到下分為五層：
- 邊框（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)頁(yè)的頂部加上 DOCTYPE 聲明，所有瀏覽器都會(huì)采用標(biāo)準(zhǔn) W3C 盒子模型去解釋你的盒子票腰，網(wǎng)頁(yè)就能在各個(gè)瀏覽器中顯示一致了。
NOTE：如果不加 DOCTYPE 聲明女气，那么各個(gè)瀏覽器會(huì)根據(jù)自己的行為去理解網(wǎng)頁(yè)杏慰，即 IE 瀏覽器會(huì)采用 IE 盒子模型去解釋你的盒子，而 FF 會(huì)采用標(biāo)準(zhǔn) W3C 盒子模型解釋你的盒子，所以網(wǎng)頁(yè)在不同的瀏覽器中就顯示的不一樣了缘滥。
（三）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è)沒(méi)有內(nèi)邊距或邊框把外邊距分隔開(kāi)）榛斯，它們的上和 / 或下外邊距也會(huì)發(fā)生合并。如下圖所示：
③外邊距甚至可以與自身發(fā)生合并搂捧。假設(shè)有一個(gè)空元素驮俗，它有外邊距，但是沒(méi)有邊框或填充允跑。在這種情況下王凑，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并：
④如果這個(gè)外邊距遇到另一個(gè)元素的外邊距聋丝，它還會(huì)發(fā)生合并：
這就是一系列的段落元素占用空間非常小的原因索烹，因?yàn)樗鼈兊乃型膺吘喽己喜⒌揭黄穑纬闪艘粋€(gè)小的外邊距弱睦。
那怎么解決這個(gè)問(wèn)題呢百姓？——戳下面的鏈接
轉(zhuǎn)：http://www.reibang.com/p/caf9b884218d
