CSS中怪異盒模型和標準盒模型有什么用

這篇文章主要為大家展示了“CSS中怪異盒模型和標準盒模型有什么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS中怪異盒模型和標準盒模型有什么用”這篇文章吧。

在html文檔中，每個渲染在頁面中的標簽都是一個個盒子模型。

盒子模型又分為 ： W3C標準的盒子模型 和 IE標準的盒子模型。

由于目前大部分主流的瀏覽器支持的是W3C標準盒模型（標準盒模型），也有保留對怪異盒子樣式的解析，當然IE沿用的是自己標準的盒模型（怪異盒子模型）

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

標準盒模型：

<!--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(標準盒模型)-->
.box1{
         width: 200px;
         height: 200px;
         background-color: aqua;
         padding: 30px;
         box-sizing: border-box;
        }
.box2{
         width: 200px;
         height: 200px;
         background-color: red;
        }

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

這里得出一個結論：

標準盒模型，一個塊的總寬度 = width（content的寬度） + margin（左右）+ padding（左右）+ border（左右）

怪異盒模型，一個塊的總寬度 = width（content + border + padding）+ margin(左右)

以上是“CSS中怪異盒模型和標準盒模型有什么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！