CSS 中的盒子模型，或盒模型，是 box model。它指的是我們把元素看成一個個盒子。

所以看到說盒子怎么怎么樣，實際指的是某個元素的行為如何。

box model 定義了盒子四個部分（如下）之間如何協(xié)作，最后創(chuàng)建出一個顯示在頁面上可以看到的盒子。

• 外邊距 margin

• 邊框 border

• 填充（有時也翻譯成內(nèi)邊距） padding

• 內(nèi)容

在講 margin 和 padding 的時候，曾用下面這張圖闡述過四個不同部分的位置關(guān)系。

區(qū)塊盒子（block boxes）和行內(nèi)盒子（inline boxes）

CSS 盒模型整體上適用于區(qū)塊盒子，行內(nèi)盒子使用的只是盒模型中定義的部分行為。

具體的原因在之前介紹區(qū)塊元素和內(nèi)聯(lián)元素曾簡單介紹過，這里再來仔細(xì)看看。

display 屬性實際定義了元素（盒子）的兩種行為，一個是元素與其它元素之間的關(guān)系，也就是外部顯示行為；另一個是元素內(nèi)部元素之間的關(guān)系，也就是內(nèi)部顯示行為。

外部顯示

當(dāng) display 屬性值為 block 時，它的外部顯示行為表現(xiàn)如下：

• 盒子會換行。

• width 和 height 屬性值會生效。

• padding、border 和 margin 會將其它元素從當(dāng)前盒子周圍“推開”。這里“推開”是一種形象的說法，具體就是盒子與其它元素之間的距離增大（或減少）了。

• 如果不指定 width，盒子將占據(jù)容器可用空間的全部寬度。

當(dāng) display 屬性值 為 inline 時，它的外部顯示行為表現(xiàn)如下：

• 盒子不會換行。

• width 和 height 屬性值不會生效。

• 垂直方向的 padding、margin 以及 border 會被應(yīng)用，但不會把其他處于 inline 狀態(tài)的盒子“推開”。

• 水平方向的 padding、margin 以及 border 會被應(yīng)用，且會把其他處于 inline 狀態(tài)的盒子“推開”。

內(nèi)部顯示

默認(rèn)情況下，元素內(nèi)的元素會以標(biāo)準(zhǔn)流的方式布局呈現(xiàn)，并表現(xiàn)為區(qū)塊或行內(nèi)盒子。

但可以通過 display 屬性改變內(nèi)部顯示行為，例如，display 值為 flex，它的外部行為依然是 block，但內(nèi)部顯示行為則變成了 flex，也就是后面會提到的彈性盒子。

標(biāo)準(zhǔn)盒子模型和替代盒子模型

一個區(qū)塊盒子由以下部分組成：

• 內(nèi)部盒子：內(nèi)容顯示區(qū)域，使用 width 和 height 設(shè)置其大小。

• padding 盒子：填充內(nèi)容周圍的空白處，使用 padding 相關(guān)的屬性值設(shè)置其大小。

• border 盒子：邊框盒子包裹了任何內(nèi)容和填充，使用 border 相關(guān)的屬性值設(shè)置其大小。

• margin 盒子：最外層作為該盒子與其它盒子之間的空白，使用 margin 相關(guān)的屬性值設(shè)置其大小。

標(biāo)準(zhǔn)盒子模型

.standard-box {   background-color: antiquewhite;   border: 5px solid green;   padding: 10px;   margin: 20px;   width: 200px;   height: 60px; }  .others {   background-color: lightblue; } 

定義了標(biāo)準(zhǔn)盒子的寬度為 200px，高度為 60px，同時定義了它的邊框為 5px，外邊距為 20px，填充為 10px。

<div class="others">其它盒子</div> <div class="standard-box">內(nèi)容width:200px, height:60px</div> <div class="others">其它盒子</div> 

這時，整個盒子在頁面布局中占據(jù)的空間，實際是寬度 200px + 10px + 10px + 5px + 5px + 20px + 20px。同樣的，高度占據(jù)的空間高度也不只是內(nèi)容的高度，而是要把填充，邊框和外邊距的占據(jù)的高度加到一起。

這是一個標(biāo)準(zhǔn)盒子在頁面中占據(jù)空間的計算方式。

替代盒子模型

替代盒子模型則希望對于盒在網(wǎng)頁中占據(jù)的空間計算方式不要那么復(fù)雜，直接使用 width 和 height 就能做到。

想要達(dá)成這樣的呈現(xiàn)，需要做的事情如下：

html {   box-sizing: border-box; }  *, *::before, *::after {   box-sizing: inherit; } 

在 CSS 中設(shè)置 box-sizing 的值為 border-box，這樣同樣的代碼，呈現(xiàn)的效果就和前面標(biāo)準(zhǔn)盒子不同。

整個盒子占據(jù)的寬度和高度就和內(nèi)部的寬度和高度一樣。

使用瀏覽器的開發(fā)者工具查看盒子模型

在 Chrome 瀏覽器里按住 F12，打開開發(fā)者工具。

然后選擇到前面實現(xiàn)的盒子，可以看到如下：

上面是標(biāo)準(zhǔn)盒子在瀏覽器里看到盒子模型，下面是替代盒子模型，可以看到標(biāo)注出來的數(shù)字方便我們清楚地知道它真實的寬度和高度。

總結(jié)

• ?? CSS 中的盒子模型，或盒模型，是 box model。它指的是我們把元素看成一個個盒子。

• ?? CSS 盒模型整體上適用于區(qū)塊盒子，行內(nèi)盒子使用的只是盒模型中定義的部分行為。

• ?? 一個區(qū)塊盒子由以下部分組成：內(nèi)部盒子、padding 盒子、 border 盒子和 margin 盒子。