1. 什么是盒子模型

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

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

• content：即內容屬性，它包含文本、圖像或其他媒體形式的實際數據，并且可以使用 width 和 height 屬性調整其大小。
• padding：填充或內邊距屬性，用于定義元素邊框與元素內容之間的空間，可以同時設置上下左右四個方向的內邊距。
• border：即邊框屬性，用于設置元素邊框的樣式、寬度和顏色。
• 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. 兩種模式的轉換

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

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