詳解CSS 怪異盒模型和標(biāo)準(zhǔn)盒模型

2024-07-11 08:58:50

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

在html文檔中，每個(gè)渲染在頁面中的標(biāo)簽都是一個(gè)個(gè)盒子模型。

盒子模型又分為： W3C標(biāo)準(zhǔn)的盒子模型 和 IE標(biāo)準(zhǔn)的盒子模型。

由于目前大部分主流的瀏覽器支持的是W3C標(biāo)準(zhǔn)盒模型（標(biāo)準(zhǔn)盒模型），也有保留對(duì)怪異盒子樣式的解析，當(dāng)然IE沿用的是自己標(biāo)準(zhǔn)的盒模型（怪異盒子模型）

用兩個(gè)簡單的例子分別介紹下這兩個(gè)盒子模型：

標(biāo)準(zhǔn)盒模型：

<!--html--><div class="box1">    <div class="box2"></div></div>

<!--css-->.box1{         width: 200px;         height: 200px;         background-color: aqua;         padding: 30px;        }.box2{         width: 200px;         height: 200px;         background-color: red;        }

這里外層盒子的width和height都是：30 + 200 + 30 = 260px。

怪異盒模型

<!--css中加入box-sizing屬性--><!--box-sizing屬性：border-box(怪異盒子模型)，content-box(標(biāo)準(zhǔn)盒模型)-->.box1{         width: 200px;         height: 200px;         background-color: aqua;         padding: 30px;         box-sizing: border-box;        }.box2{         width: 200px;         height: 200px;         background-color: red;        }