摘要：官方說(shuō)法就是它規(guī)定了用戶端在媒介中如何處理文檔樹。是的包含塊，同時(shí)又是的包含塊，不是絕對(duì)的。因此稱為匿名盒子。行內(nèi)盒子行內(nèi)級(jí)元素會(huì)生成行內(nèi)級(jí)盒子，該盒子同時(shí)會(huì)參與行內(nèi)格式化上下文的創(chuàng)建。如果只有一個(gè)值指定為，則其使用的值來(lái)自相等。

作者：陳大魚頭
github： KRISACHAN

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.
CSS盒模型描述了通過(guò) 文檔樹中的元素 以及相應(yīng)的 視覺格式化模型(visual formatting model) 所生成的矩形盒子。

當(dāng)瀏覽器對(duì)一個(gè) render tree 進(jìn)行渲染時(shí)，瀏覽器的渲染引擎就會(huì)根據(jù) 基礎(chǔ)盒模型(CSS basic box model) ，將所有元素劃分為一個(gè)個(gè)矩形的盒子，這些盒子的外觀，屬性由CSS來(lái)決定。

我們?cè)跒g覽器控制臺(tái)輸入如下代碼就可以看到頁(yè)面的每一個(gè)元素都是由一個(gè)矩形來(lái)包裹的，這些就是盒子。

$$("*").forEach(e => {
  e.style.border = "1px solid";
})

圖示如下：

CSS 的視覺格式化模型(visual formatting model) 是根據(jù) 基礎(chǔ)盒模型(CSS basic box model) 將 文檔(doucment) 中的元素轉(zhuǎn)換一個(gè)個(gè)盒子的實(shí)際算法。
官方說(shuō)法就是： 它規(guī)定了用戶端在媒介中如何處理文檔樹( document tree )。

每個(gè)盒子的布局由以下因素決定：

盒子的尺寸

盒子的類型：行內(nèi)盒子 (inline)、行內(nèi)級(jí)盒子 (inline-level)、原子行內(nèi)級(jí)盒子 (atomic inline-level)、塊級(jí)盒子 (block-level)

定位：正常流、浮動(dòng)、絕對(duì)定位

文檔樹中當(dāng)前盒子的子元素 或 兄弟元素

視口(viewport) 的尺寸 和位置

盒子內(nèi)部圖片的尺寸

其他某些外部因素

視覺格式化模型(visual formatting model) 的計(jì)算，都取決于一個(gè)矩形的邊界，這個(gè)矩形，被稱作是 包含塊( containing block ) 。 一般來(lái)說(shuō)，(元素)生成的框會(huì)扮演它子孫元素包含塊的角色；我們稱之為：一個(gè)(元素的)框?yàn)樗淖訉O節(jié)點(diǎn)建造了包含塊。包含塊是一個(gè)相對(duì)的概念。

例子如下：

    

        

            
hi
        
    

以上代碼為例，div 和 table 都是包含塊。div 是 table 的包含塊，同時(shí) table 又是 td 的包含塊，不是絕對(duì)的。

圖示：(圖片來(lái)自w3help)：

盒子的生成是 CSS視覺格式化模型 的一部分，用于從文檔元素生成盒子。盒子的類型取決于CSS display 屬性。
格式化上下文(formatting context) 是定義 盒子環(huán)境 的規(guī)則，不同 格式化上下文(formatting context) 下的盒子有不同的表現(xiàn)。

以下是盒子相關(guān)的概念定義：

塊級(jí)元素

當(dāng)元素的display 為 block、list-item 或 table 時(shí)，它就是塊級(jí)元素。

塊級(jí)盒子

塊級(jí)盒子用于描述它與父、兄弟元素之間的關(guān)系。

每個(gè)塊級(jí)盒子都會(huì)參與 塊格式化上下文（block formatting context） 的創(chuàng)建。

每個(gè)塊級(jí)元素都會(huì)至少生成一個(gè)塊級(jí)盒子，即主塊級(jí)盒子（principal block-level box）

主塊級(jí)盒子包含由后代元素生成的盒子以及內(nèi)容，同時(shí)它也會(huì)參與定位方案。

一個(gè)同時(shí)是塊容器盒子的塊級(jí)盒子稱為塊盒子（block box）。

匿名盒子

某些情況下需要進(jìn)行視覺格式化時(shí)，需要添加一些增補(bǔ)性的盒子，這些盒子不能被CSS 選擇器選中，也就是所有可繼承的 CSS 屬性值都為 inherit ，而所有不可繼承的 CSS 屬性值都為 initial。因此稱為匿名盒子(anonymous boxes)。

行內(nèi)元素

當(dāng)元素的display 為 inline、inline-block 或 inline-table 時(shí)，它就是行內(nèi)級(jí)元素。

顯示時(shí)可以與其他行內(nèi)級(jí)內(nèi)容一起顯示為多行。

行內(nèi)盒子

行內(nèi)級(jí)元素會(huì)生成行內(nèi)級(jí)盒子，該盒子同時(shí)會(huì)參與行內(nèi)格式化上下文（inline formatting context）的創(chuàng)建。

匿名行內(nèi)盒子

類似于塊盒子，CSS引擎有時(shí)候也會(huì)自動(dòng)創(chuàng)建一些行內(nèi)盒子。這些行內(nèi)盒子無(wú)法被選擇符選中，因此是匿名的，它們從父元素那里繼承那些可繼承的屬性，其他屬性保持默認(rèn)值 initial。

行盒子

行盒子由行內(nèi)格式化上下文創(chuàng)建，用來(lái)顯示一行文本。在塊盒子內(nèi)部，行盒子總是從塊盒子的一邊延伸到另一邊（譯注：即占據(jù)整個(gè)塊盒子的寬度）。當(dāng)有浮動(dòng)元素時(shí)，行盒子會(huì)從向左浮動(dòng)的元素的右邊緣延伸到向右浮動(dòng)的元素的左邊緣。

run-in 盒子（在CSS 2.1的標(biāo)準(zhǔn)中移除了）

run-in盒子可以通過(guò)display: run-in來(lái)設(shè)置，它既可以是塊盒子，又可以是行內(nèi)盒子，這取決于它后面的盒子的類型。

BFC 這個(gè)概念來(lái)自于 視覺格式化模型(visual formatting model) 中的  正常流(Normal flow)。

浮動(dòng)、絕對(duì)定位元素、塊容器（例如inline-blocks、table-cells、and table-captions）以及溢出而非可視的元素（除非該值已經(jīng)傳播到了視口）都是建立 BFC(Block formatting contexts) 的條件。

在BFC(Block formatting contexts)中，在包含塊內(nèi)一個(gè)盒子一個(gè)盒子不重疊地垂直排列，兩個(gè)兄弟盒子直接的垂直距離由margin決定。浮動(dòng)也是如此（雖然有可能兩個(gè)盒子的距離會(huì)因?yàn)?b>floats而變小），除非該盒子再創(chuàng)建一個(gè)新的BFC。

魚頭注：簡(jiǎn)單來(lái)說(shuō)，BFC就是一個(gè)獨(dú)立不干擾外界也不受外界干擾的盒子啊(/ω＼)。

"margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" = 包含塊的寬度

上面的計(jì)算法則是基于 writing-mode: ltr而言，如果是別的書寫順序，則按照該順序來(lái)計(jì)算。

如果寬度不是 auto 或者 "border-left-width"+"padding-left"+"width"+"padding-right"+"border-right-width" 的結(jié)果大于包含塊的寬度，對(duì)于以下規(guī)則，被視為零。

如果只有一個(gè)值指定為"auto"，則其使用的值來(lái)自相等。

如果寬度設(shè)置為 auto ，則任何其他 auto 值變?yōu)?0 ，并且寬度會(huì)跟著所以盒子的情況鋪滿。

如果 "margin-left" 跟 "margin-right" 都為 auto ，則會(huì)使元素相對(duì)于包含塊的邊緣水平居中。

如果 "margin-left" 跟 "margin-right" 都為 auto ，則它們的具體值為 0 。

如果寬度為 auto，則使用 shrink-to-fit 的寬度計(jì)算方式（CSS 2.2沒有定義精確的算法）。

然后 shrink-to-fit 大概的計(jì)算方式則是：min(max(preferred minimum width, available width), preferred width)。

"left" + "margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" + "right" = 包含塊的寬度

如果 "left"，"width" 和 "right" 都是 "auto"，則首先將 "margin-left" 和 "margin-right" 的 "auto" 值設(shè)置為 0。

如果 "left"，"width" 和 "right" 都不是 "auto"，則按照實(shí)際值來(lái)算。

如果 "margin-left" 跟 "margin-right" 都為 0 ，則根據(jù) "left" ，"width" 和 "right" 的值是否是 "auto" 來(lái)計(jì)算。 如果 一個(gè)方向值 ，"width" 的值是 "auto"，而 "另一個(gè)一個(gè)方向值" 不是，則寬度使用 shrink-to-fit 算法計(jì)算。如果一個(gè)值為"auto"而另外兩個(gè)值不算，則該值使用 shrink-to-fit 來(lái)計(jì)算。

上面的計(jì)算法則是基于 writing-mode: ltr 而言，如果是別的書寫順序，則按照該順序來(lái)計(jì)算。

魚頭注：這里特別說(shuō)明一點(diǎn)，在MDN中依然把flexbox跟gridbox 算在 BFC中，但在最新的規(guī)范里，它們已經(jīng)從BFC中分離了出去，成為獨(dú)立的一個(gè)CSS模塊，內(nèi)容如下：

CSS Flexible Box Layout Module Level 1

CSS Grid Layout Module Level 2

如果你也喜歡探討技術(shù)，或者對(duì)本文，本系列有任何的意見或建議，你可以掃描下方二維碼，關(guān)注微信公眾號(hào)“ 魚頭的Web海洋 ”，隨時(shí)與魚頭互動(dòng)。歡迎！衷心希望可以遇見你。