盒模型

百度知道對此的解釋, 很有意思, 在此引用一下

CSS盒子模型, 內容（CONTENT）就是盒子里裝的東西; 而填充(PADDING)就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料; 邊框(BORDER)就是盒子本身了; 至于邊界(MARGIN)則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出。 —— 百度知道

這段描述很有趣, 很好的解釋margin、border、padding之間的關系, 不同模式下, 盒模型的width也是不同的, 那么好, 盒模型的第一個坑來了, width的范圍問題。

通常瀏覽器里, 盒模型的分為兩種模式, 兩種模式(怪異模式和標準模式)下width和height的值不同, 怪異模式的width和height包含border、padding和content, 而標準模式下的width和height只包含content, 這就是為啥有些瀏覽器渲染出來的dom標簽排版會亂。解決也很簡單, 在標簽的上面, 加上doctype的設置就好了, 讓瀏覽器統一用同一種標準去解析頁面。 怪異模式(左圖)和標準模式(右圖)的如下:

當然, 還有用來改變盒模型width范圍的一個css3的屬性, box-sizing:

當設置為'border-box'時, width = border + padding + content;

當設置為'content-box'時, width = content。

1.   <div class="wrapper z1"></div>

2.   <div class="wrapper z2"></div>

   .wrapper{

1.     width: 100px;

2.     height: 50px;

3.     padding: 10px;

4.     background-color: #dedede;

   }

1. .z1{

2.     box-sizing: border-box;

3. }

4. .z2{

5.     box-sizing: content-box;

    }

那么第一個div的實際寬度為100px, 第二個div的實際寬度為120px。

說完盒模型的padding和border, 那么再來吐槽下margin, 盒模型的margin的折疊(margin collapsing)問題, 有些也叫外邊距合并。

通常我們說的折疊, 都是垂直方向上的折疊, 水平方向是不存在的。標準模式下, 上下兩個兄弟的塊級元素, margin是會重疊的, 并且以最大的那個間距為準(都為正數)。

比如下面這段代碼:

   <div class="wrapper"></div>

   <div class="wrapper"></div>

   .wrapper{

1.      width: 100px;

2.      height: 50px;

3.      margin: 10px;

4.      background-color: #dedede;

5.   }

上圖灰色為重疊部分, 重疊10px的間距。

既然兄弟盒模型會有margin折疊, 那么父子呢? 答案是一定的, 父子也存在margin折疊的問題, 只不過條件稍微苛刻一點, 我們一起來看下。 父子組件的折疊觸發, 要求不能有間隙, 就是父組件不能設置border或padding值, 不能有空余的內容, 且同時有margin值, 比如下面這段代碼:

1. <div class="outer">

2.   <div class="inner"></div>

3. </div>

   .outer{

1.     width: 200px;

2.     height: 100px;

3.     margin: 10px;

4.     background-color: #dedede;

   }

   .inner{

1.      width: 100px;

2.      height: 50px;

3.      margin: 10px;

4.      background-color: #bcbcbc;

   }

當然, 折疊后的空余部分, 也是取較大值, 且折疊觸發, 只存在于垂直方向。

上圖灰色為重疊部分, 重疊10px的間距。

剛才提到一個詞"間隙", 如果有間隙的話是不會觸發折疊的, 比如父級元素設置了padding, 或者子元素都設置了相對定位和top值等等。如下圖:

看到這里, 我想有些同學會問了, 對于這些 margin collapsing, 有沒有一個統一的整理, 對于大轉轉的FEer, 我們當然想到了大家的前面, 請看下面:

• Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

• Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

• Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).

• Margins of inline-block boxes do not collapse (not even with their in-flow children).

• The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.

• The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

• The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not collapse with a top margin that has clearance.

• A box's own margins collapse if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) collapse.

這是從W3C里引用的原文, 這8條規則是特殊的不折疊的情況, 簡單翻譯過來(僅供參考):

• 浮動的盒模型不會margin折疊

• 創建BFC與子不折疊

• 設置定位的盒模型不會折疊

• 行內塊級元素的盒模型不折疊

• 兄弟元素有間隙不折疊

• 父子盒模型元素, 孩子元素有border、padding、有浮動就不折疊

• height為auto、min-height為0的塊級盒模型, 和它的最后一個沒有border和padding的孩子盒模型底邊距折疊, 且孩子的底部外邊距和被清除浮動上邊距有間隙不折疊。

• 如果min-height為0, 上下border、上下padding都為0, height為0或auto, 且沒有行內盒模型, 他的孩子節點都會折疊

有點晦澀難懂, 大家不妨消化一下。說到這, 再補充一下, 盒模型margin折疊的計算問題, 總結了以下幾點:

• 同為正值時, 取較大者為兩者為間距

• 一正一負時, 正負相加為間距, 若結果為負值, 則兩者部分重合

• 都為負值時, 兩者重合, 且重合部分為絕對值大者

舉個例子:

1.    <div class="wrapper z-01"></div>

2.    <div class="wrapper z-02"></div>

1.    .wrapper{

2.        width: 100px;

3.        height: 50px;

4.        background-color: #dedede;

5.    }

6.    .z-01{

7.        margin: -10px;

8.    }

9.    .z-02{

10.        margin: -15px;

11.    }

兩者都為負值, 兩個div上下重合, 且重合間距為15px。

暫時就想到這么多, css的學習之路任重而道遠, 盒模型又是重中之重。上面有描述不對的地方也歡迎各位同學批評指正, 也歡迎大家來到大轉轉FE做客, 一起討論一起研究前端的技術問題。志同道合的同學, 也歡迎加入我們轉轉FE團隊, 咱們一起打拼。