1. 什么是盒子模型

CSS 盒子模型是一個包含多個屬性的容器，包括邊框、邊距、填充和內(nèi)容本身。它用于創(chuàng)建網(wǎng)頁的設計和布局。它可以用作自定義不同元素布局的工具包。Web 瀏覽器根據(jù) CSS 框模型將每個元素渲染為矩形框。

CSS 中的盒子模型有多種屬性，以下列出主要屬性：

• content：即內(nèi)容屬性，它包含文本、圖像或其他媒體形式的實際數(shù)據(jù)，并且可以使用 width 和 height 屬性調(diào)整其大小。
• padding：填充或內(nèi)邊距屬性，用于定義元素邊框與元素內(nèi)容之間的空間，可以同時設置上下左右四個方向的內(nèi)邊距。
• border：即邊框?qū)傩裕糜谠O置元素邊框的樣式、寬度和顏色。
• margin：即外邊距屬性，用于定義元素外面的空間，在border屬性周圍。

2. 標準盒子模型

從上圖可以看出：

• 盒子的總寬度 = width + padding + border + margin
• 盒子的總高度 = height + padding + border + margin

此時的width/height只是content的寬度/高度，是不包含padding和border的值。

3. 怪異盒子模型

從上圖可以看出：

• 盒子的總寬度 = width + margin
• 盒子的總高度 = height + margin

這里的width/height包含了padding和border的值。

4. 代碼測試

定義一個div，其屬性值如下：

div{
    margin: 20px;
    width: 100px;
    height: 100px; 
    padding: 5px; 
    border: 2px solid #000000;
}  

標準模式下：盒子的總寬度 = 盒子的總高度 = 154

怪異模式下：盒子的總寬度 = 盒子的總高度 = 140

5. 兩種模式的轉(zhuǎn)換

box-sizing中比較常用的兩個屬性值為 content-box 和 border-box ，它可以改變盒子模型的解析模式，可以參考上面的代碼案例。

• 當設置box-sizing: content-box時，采用標準模式進行計算，默認模式；
• 當設置box-sizing: border-box時，采用怪異模式進行計算。