深入CSS基礎之box model

摘要： box model應該是CSS當中最核心的概念之一了，本篇主要講述CSS當中的box model(盒模型)。 在看本篇內容之前，可以先自己回答下面幾個問題： 什麼是box model？ box model 包含了哪些內容？ 它的作用是什麼？ 它出現在瀏覽器處理文件的哪一個步驟？...

box model應該是CSS當中最核心的概念之一了，本篇主要講述CSS當中的box model(盒模型)。

在看本篇內容之前，可以先自己回答下面幾個問題：

1. 什麼是box model？ box model 包含了哪些內容？ 它的作用是什麼？ 它出現在瀏覽器處理文件的哪一個步驟？ 後續步驟是什麼？
2. collapse margin的細節是什麼？

什麼是box model(盒模型)

CSS2.1 specification 8.box model 第一句話就很好的描述了它的定義：

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

從這句話中我們可以得出來 box model 是什麼： box model 是用來描述DOM樹中元素生成的矩形盒子的，並且UAs會根據 visual formatting model 來佈局這些盒子。

box dimension(盒尺寸)

這一小節是用來描述具體的矩形盒子的，每個盒子會有4塊區域：

• content area
• padding area
• border area
• margin area 每塊區域的尺寸由各自相關的屬性決定。另外 padding , border , margin 可以被分割成 top, bottom, left, right 四個小區域，並由具體的屬性來定義。

下面我們來引入新的名詞(為了後面的內容)， edge : 每個盒子的周長被稱為 edge ，即邊界 。相應的，我們可以知道每個box都會有四個 edge .

• content edge or inner edge: content area 的尺寸預設由元素的 width 和 height 兩個屬性，元素的內容以及它的containing block決定
• padding edge： padding edge定義了元素的padding box（包含content 和 padding area）
• border edge: border edge定義了元素的border box（包含content，padding 和 border area）
• margin edge or outer edge:如果 margin的width為0，那麼margin area和padding area 一樣

Note： 一個box的content area， padding area 和 border area的 background樣式由該元素的 background 屬性決定。也就是說 background 預設會一直延伸到 border area，而 margin總是透明的。在CSS3中，我們可以使用background新屬性來修改預設情況。

CSS Box model 3 新增加一段： When a box fragments—is broken, as across lines or across pages, into separate box fragments—each of its boxes (content box, padding box, border box, margin box) also fragments. How the content/padding/border/margin areas react to fragmentation is specified in [css-break-3] and controlled by the box-decoration-break property.

這一段主要講的是當一個盒子跨行或者跨頁時會被分割成多個box片段，那麼對於該盒子的content，padding，border，margin在不同的box 片段中該如何表現？這些內容定義在css-break-3中，並且可以使用 box-decoration-break 來控制。 另外其實在CSS2.1也有描述這樣的場景，在8.6中描述了inline box跨行時盒模型該如何表現。

margin屬性: margin-top , margin-bottom , margin-left , margin-right 和 margin

這些屬性都是初學時就已經用的很熟的。因此，這裡只強調幾個注意事項： 先看屬性的定義

'margin-top', 'margin-bottom', 'margin-left', 'margin-right'Value: <margin-width> | inherit Initial: 0 Applies to: all elements except elements with table display types other than table-caption, table and inline-table Inherited: no Percentages: refer to width of containing block Media: visual Computed value: the percentage as specified or the absolute length

1. value 可以是 <margin-width> ，包含3種具體的取值：
   • <length> : 指定固定的寬度，比如 3px , 1em 等
   • <percentage> : 百分比取值在由 computed value 轉換成 used value 的時候計算，基數是 generated box's containing block 的 width (也就是該元素的包含塊的width). 而如果containing block的width會依賴該元素，那麼具體表現在CSS 2.1中未定義的。
   • auto， 後面具體講
2. margin-top 和 margin-bottom 對於 non-replaced inline elements 不起作用。
3. 在CSS3當中，上面這幾個屬性被稱為physical margin屬性。並且介紹了相對應的logical margin屬性,比如 margin-block-start , margin-block-end (這些屬性跟文件的 writing mode 相關)。（logical margin和physical margin控制的是同樣的margin區域，只是不同的表現形式而已。CSS3加入這個特性是因為不同國家的文件排列形式是不一樣的，比如阿拉伯語就是從右往左寫的）

Note: CSS3中新增的 margin-trim 屬性由於目前沒有任何瀏覽器支援，這裡不做介紹(當前時間為 2019年2月 )。

collapsing margins

在CSS當中，2個或多個盒子相鄰的垂直方向margins會合併成一個margin，這種合併被我們稱為 collapse （塌陷），而合併後的margin被叫做 collapse margin . 首先，我們先強調一些margin不會合並的例外情況：

1. 水平方向上的margin不會collapse
2. 對於相鄰的垂直方向上的margin不會塌陷有兩種情況：

   clear
   

那麼，如何判斷兩個盒子的margin是相鄰的(adjoining)呢? 需要同時滿足下面那幾個條件：

• 兩個盒子都屬於in-flow(流內) block-level boxes ，並且處於同一個 block formatting model 。
• 沒有 line box , clearance , padding , border 將它們間隔開（這裡高度為0的 line box 會被忽略)。
• 都屬於垂直相鄰的盒邊界，也就是滿足下面的其中一種情況：
  • 盒子的上外邊距和其第一個 in-flow 孩子節點的上外邊距
  • 盒子的下外邊距與其下一個緊挨著的 in-flow 中的兄弟節點的上外邊距
  • 盒子的下外邊距（並且該盒子的height computed value為auto）與其最後一個 in-flow 孩子節點的下外邊距
  • 盒子的上外邊距和下外邊距，滿足條件是：該盒子沒有建立新的 block formatting model ， min-height 為0，height的computed value為 0 或者 auto ，沒有 in-flow 孩子節點。

另外需要注意的是摺疊外邊距也能夠與另一個外邊距相鄰，只需要其外邊距的任意一部分與另一個外邊距相鄰就算。

Note：由上面的collapse margin 的定義我們可以得出以下的推論：

• 相鄰外邊距可以由不具備兄弟或祖先關係的元素之間生成
• floated box 的margin和任何其他盒子的margin都不會合並（包括它流內的孩子節點）- 因為 float box 不是流內的。
• 絕對定位的盒子的margin和任何其他盒子的margin都不會合並（包括它流內的孩子節點） - 同樣是因為絕對定位的盒子是流外的。
• 建立新的 block formatting context 的元素的margin不會與它的流內孩子節點的margin合併（比如floated box）
• inline-block 盒子的margin不會與其他盒子的margin合併（包括它的流內孩子節點）- 建立了新的 block formatting model 並且不是 block-level box .
• in-flow block-level box 的下外邊距會與相鄰的 in-flow block-level 兄弟節點的上外邊距合併，除非該兄弟節點存在 clearance
• in-flow block element 的上外邊距會與它的第一個流內孩子節點（該孩子節點是 block-level 盒子）的上外邊距合併，這裡需要該元素不存在 top border ，不存在 top padding ，並且孩子節點也沒有 clearance
• 一個 height 為 auto 並且 min-height 為 0 的 in-flow block-level box 的 bottom margin 會與它的最後一個 流內block-level 的孩子節點的 bottom margin 合併，條件是該盒子沒有 bottom padding ， bottom border 並且其孩子節點的 bottom margin 沒有與具有clearance的top margin合併
• 盒子自身的外邊距也會合並，條件是 min-height 為 0 , 既沒有上下邊框，也沒有上下內邊距，height為0或者auto，且不包含line box（並且所有流內孩子的外邊距都會合並）

那麼合併後的margin該如何取值呢？

• 當兩個或者更多的margin合併時，collapsed margin的寬度為被合併的所有外邊距中的最大值
• 如果存在負margin，那麼就從正相鄰margin中的最大值減去負相鄰margin中絕對值最大的值
• 如果沒有正margin，就用0減去相鄰margin中絕對值最大的值

下面我們討論最後一種特殊情況：如果一個盒子的上下外邊距相鄰，那麼有可能外邊距合併會穿透該盒子。在這種情況下，該元素的位置取決於合併margin的其他元素之間的關係：

• 如果該元素的margins和它父元素的top margin合併，那麼該盒子的top border edge和它父元素的top border edge一樣
• 否則的話，要麼該元素的父元素沒有參與margin collapse，要麼只有該父元素的bottom margin參與。那麼該元素的上邊框edge和該元素bottom border非0時相同。

需要注意的是，被摺疊外邊距穿過的元素的位置不影響其他外邊距正要被合併的元素的位置，其上邊框邊界的位置僅僅是用於佈局這些元素的後代元素。

padding屬性： padding-top , padding-right , padding-bottom , padding-left 和 padding

padding屬性定義了盒子的內邊距區域的寬度。

'padding-top', 'padding-right', 'padding-bottom', 'padding-left' Value: <padding-width> | inherit Initial: 0 Applies to: 除table-row-group，table-header-group，table-footer-group，table-row，table-column-group和table-column外的所有元素 Inherited: no Percentages: 參照包含塊的寬度 Media: visual Computed value: 指定的百分比或者絕對長度

padding屬性和margin屬性主要由下面幾個不同：

auto

和margin一樣的是，百分比的基數是generated box's containing block的width(也就是該元素的包含塊的width).

note：這裡的 padding-top 等4個屬性仍然是physical 屬性。在CSS3當中添加了logical padding - padding-block-start 等。

border屬性

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' Value: <border-width> | inherit Initial: medium Applies to: 所有元素 Inherited: no Percentages: N/A Media: visual Computed value: 絕對長度，或者'0'，如果border style為'none'或者'hidden'的話

對於 border-width 需要注意：

1. <border-width> 只有關鍵字和 <length> 這兩種選擇，關鍵字是 thin , medium , thick ，大小依次變大，具體大小由使用者代理決定
2. 邊框寬度不能為負

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' Value: <color> | transparent | inherit Initial: 'color'屬性的值 Applies to: 所有元素 Inherited: no Percentages: N/A Media: visual Computed value: 從'color'屬性取值的話，取'color'的計算值，否則，就按指定值

這裡需要注意的是： border-color 的初始值是 color 屬性的值，我們有些時候可以利用這個特性來實現一些特殊的要求。