前言

在CSS的學習過程中，經常會遇到由不同盒子模型帶來的誤解問題。這篇文章舉例分析了兩種不同的盒子模型：W3C盒模型和IE盒模型。

---

一、W3C盒模型（標準盒模型）

下圖為W3C盒模型：

?CSS中設置的width和height只會影響內容區域的寬度和高度，如果額外設置了padding和border值，則會把標簽的實際寬度撐大。

給一個標簽添加：box-sizing:content-box；(元素默認)

這個標簽就轉換為了w3c盒模型

標簽得實際寬度 = 設置的width寬度 + border寬度 + padding的寬度

舉個例子：

div {box-sizing: content-box;width: 200px;height: 200px;background-color: purple;}

以上代碼會得到一個寬高為200px的W3C盒模型，如圖：

?如果我們額外設置了padding和border值，則實際寬度會變大。

div {box-sizing: content-box;width: 200px;height: 200px;padding: 20px;border: 10px solid black;background-color: purple;}

如圖，div的寬高變為了260px，加上了padding和border的寬度。

二、IE盒模型（怪異盒模型）

下圖為IE盒模型：

?CSS中設置的width和height等于實際寬度和高度，如果額外設置了padding和border值，則實際寬高不變，內容區域變小。

給一個標簽添加：box-sizing:border-box；

這個標簽就轉換為了怪異盒模型

標簽得實際寬度 = 設置的寬度

如果設置了padding和border，內容的寬高 =?設置的width寬度 -?border寬度 -?padding的寬度

舉個例子：

div {box-sizing: border-box;width: 200px;height: 200px;background-color: purple;}

以上代碼會得到一個寬高為200px的IE盒模型，如圖：

?如果我們額外設置了padding和border值，則實際寬度也不會改變，但內容區域會縮小。

div {box-sizing: border-box;width: 200px;height: 200px;padding: 20px;border: 10px solid black;background-color: purple;}

如圖，div的寬高不變，內容區域寬高縮小為140px，減去了padding和border的寬度。

---

總結

這篇文章總結了兩種不同的盒子模型：W3C盒模型和IE盒模型

• box-sizing: content-box?是W3C盒子模型
• box-sizing: border-box?是IE盒子模型

W3C盒子模型：?

標簽得實際寬度 = 設置的寬度 + border寬度 + padding的寬度

IE盒子模型：

標簽得實際寬度 = 設置的寬度

總結

以上是生活随笔為你收集整理的CSS的两种盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。