在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(左右)