-
標準盒模型，以在 Chrome 中為例。
??一個元素的真實寬度 = 2（margin + padding + border） + width 。
??所以，CSS 中的 width 只表示內容的寬度。以上被稱為標準盒模型。 CSS3 中有一個 box-sizing 屬性。
??box-sizing: border-box; 可以規定元素以 border 作為盒模型；即真實寬度 = 2margin + width，其中 width = 2（padding + border） + 內容寬度；外邊距合并
??在 BFC 中也涉及一部分外邊距合并，在此處只討論普通文檔流中的外邊距合并。
??首先，外邊距合并，1.只在普通文檔流中的塊級元素身上會發生；2.只在上下外邊距之間才會發生，左右外邊距不會合并。滿足這兩點才會發生外邊距合并。
??所以一個行內塊元素 (display: inline-block) 和一個塊級元素 (display: block) 元素之間不會發生外邊距合并。
如下是具體情況分析：-
1.兩個塊級元素上下分布
-
2.一個元素包圍另一個元素。（此時，父元素不能有 border 或者 padding；即兩者的margin是直接接觸的）
-
3.一個空元素，有 margin 屬性，但是沒有 border 和 padding 屬性，那么它自身會發生上下邊距合并。
??并且，再次遇到其他元素的外邊距時，仍然會發生外邊距合并。
注：所有的邊距合并，都取絕對值較大的那個值（如-10px和-20px，取-20px）。
IE6，7，8有怪異模式
??IE6/7/8中在聲明時，不加上 DOCTYPE 會導致瀏覽器按照IE盒模型進行渲染，即真實寬度 = width + 2margin ；其中 width = 2（padding + border）+ 內容寬度。
