-
標(biāo)準(zhǔn)盒模型毫蚓，以在 Chrome 中為例扇丛。
??一個元素的真實寬度 = 2（margin + padding + border） + width 绿映。
??所以，CSS 中的 width 只表示內(nèi)容的寬度骂蓖。以上被稱為標(biāo)準(zhǔn)盒模型积瞒。 CSS3 中有一個 box-sizing 屬性。
??box-sizing: border-box; 可以規(guī)定元素以 border 作為盒模型登下；即真實寬度 = 2margin + width茫孔，其中 width = 2（padding + border） + 內(nèi)容寬度；外邊距合并
??在 BFC 中也涉及一部分外邊距合并被芳，在此處只討論普通文檔流中的外邊距合并银酬。
??首先，外邊距合并筐钟，1.只在普通文檔流中的塊級元素身上會發(fā)生揩瞪；2.只在上下外邊距之間才會發(fā)生，左右外邊距不會合并篓冲。滿足這兩點才會發(fā)生外邊距合并李破。
??所以一個行內(nèi)塊元素 (display: inline-block) 和一個塊級元素 (display: block) 元素之間不會發(fā)生外邊距合并宠哄。
如下是具體情況分析：-
1.兩個塊級元素上下分布
-
2.一個元素包圍另一個元素。（此時嗤攻，父元素不能有 border 或者 padding毛嫉；即兩者的margin是直接接觸的）
-
3.一個空元素，有 margin 屬性妇菱，但是沒有 border 和 padding 屬性承粤，那么它自身會發(fā)生上下邊距合并。
??并且闯团，再次遇到其他元素的外邊距時辛臊，仍然會發(fā)生外邊距合并。
注：所有的邊距合并房交，都取絕對值較大的那個值（如-10px和-20px彻舰，取-20px）。
IE6候味，7刃唤，8有怪異模式
??IE6/7/8中在聲明時，不加上 DOCTYPE 會導(dǎo)致瀏覽器按照IE盒模型進(jìn)行渲染白群，即真實寬度 = width + 2margin 尚胞；其中 width = 2（padding + border）+ 內(nèi)容寬度。
