前言

在CSS的學(xué)習(xí)過程中，經(jīng)常會(huì)遇到由不同盒子模型帶來的誤解問題。這篇文章舉例分析了兩種不同的盒子模型：W3C盒模型和IE盒模型。

---

一、W3C盒模型（標(biāo)準(zhǔn)盒模型）

下圖為W3C盒模型：

?CSS中設(shè)置的width和height只會(huì)影響內(nèi)容區(qū)域的寬度和高度，如果額外設(shè)置了padding和border值，則會(huì)把標(biāo)簽的實(shí)際寬度撐大。

給一個(gè)標(biāo)簽添加：box-sizing:content-box；(元素默認(rèn))

這個(gè)標(biāo)簽就轉(zhuǎn)換為了w3c盒模型

標(biāo)簽得實(shí)際寬度 = 設(shè)置的width寬度 + border寬度 + padding的寬度

舉個(gè)例子：

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

以上代碼會(huì)得到一個(gè)寬高為200px的W3C盒模型，如圖：

?如果我們額外設(shè)置了padding和border值，則實(shí)際寬度會(huì)變大。

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

如圖，div的寬高變?yōu)榱?60px，加上了padding和border的寬度。

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

下圖為IE盒模型：

?CSS中設(shè)置的width和height等于實(shí)際寬度和高度，如果額外設(shè)置了padding和border值，則實(shí)際寬高不變，內(nèi)容區(qū)域變小。

給一個(gè)標(biāo)簽添加：box-sizing:border-box；

這個(gè)標(biāo)簽就轉(zhuǎn)換為了怪異盒模型

標(biāo)簽得實(shí)際寬度 = 設(shè)置的寬度

如果設(shè)置了padding和border，內(nèi)容的寬高 =?設(shè)置的width寬度 -?border寬度 -?padding的寬度

舉個(gè)例子：

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

以上代碼會(huì)得到一個(gè)寬高為200px的IE盒模型，如圖：

?如果我們額外設(shè)置了padding和border值，則實(shí)際寬度也不會(huì)改變，但內(nèi)容區(qū)域會(huì)縮小。

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

如圖，div的寬高不變，內(nèi)容區(qū)域?qū)捀呖s小為140px，減去了padding和border的寬度。

---

總結(jié)

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

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

W3C盒子模型：?

標(biāo)簽得實(shí)際寬度 = 設(shè)置的寬度 + border寬度 + padding的寬度

IE盒子模型：

標(biāo)簽得實(shí)際寬度 = 設(shè)置的寬度

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。