日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

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

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

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

• 外邊距 margin

• 邊框 border

• 填充（有時也翻譯成內邊距） padding

• 內容

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

區塊盒子（block boxes）和行內盒子（inline boxes）

CSS 盒模型整體上適用于區塊盒子，行內盒子使用的只是盒模型中定義的部分行為。

具體的原因在之前介紹區塊元素和內聯元素曾簡單介紹過，這里再來仔細看看。

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

外部顯示

當 display 屬性值為 block 時，它的外部顯示行為表現如下：

• 盒子會換行。

• width 和 height 屬性值會生效。

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

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

當 display 屬性值 為 inline 時，它的外部顯示行為表現如下：

• 盒子不會換行。

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

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

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

內部顯示

默認情況下，元素內的元素會以標準流的方式布局呈現，并表現為區塊或行內盒子。

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

標準盒子模型和替代盒子模型

一個區塊盒子由以下部分組成：

• 內部盒子：內容顯示區域，使用 width 和 height 設置其大小。

• padding 盒子：填充內容周圍的空白處，使用 padding 相關的屬性值設置其大小。

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

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

標準盒子模型

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

定義了標準盒子的寬度為 200px，高度為 60px，同時定義了它的邊框為 5px，外邊距為 20px，填充為 10px。

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

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

這是一個標準盒子在頁面中占據空間的計算方式。

替代盒子模型

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

想要達成這樣的呈現，需要做的事情如下：

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

在 CSS 中設置 box-sizing 的值為 border-box，這樣同樣的代碼，呈現的效果就和前面標準盒子不同。

整個盒子占據的寬度和高度就和內部的寬度和高度一樣。

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

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

然后選擇到前面實現的盒子，可以看到如下：

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

總結

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

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

• ?? 一個區塊盒子由以下部分組成：內部盒子、padding 盒子、 border 盒子和 margin 盒子。