在一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子胁黑。就是常說的css盒模型
盒模型包含的有：
- margin（外邊距）
- boder（邊框）
- padding（內(nèi)邊距）
- 內(nèi)容寬高
由于瀏覽器廠商原因，導(dǎo)致盒模型并不統(tǒng)一，常見的有兩種：
普通盒模型
<div class="box">
.box {
box-sizing: content-box; // chrome默認(rèn)為普通盒模型
width: 100px;
height: 100px;
margin: 10px;
border: 10px solid #000;
padding: 10px;
background: blue;
}
普通盒模型
可以看到：
- 盒子的
總寬度為：width+margin+padding+border = 100 + 10 + 10 + 10 = 130 - 盒子的
總高度為：height+margin+padding+border = 100 + 10 + 10 + 10 = 130
怪異盒模型
<div class="box">
.box {
box-sizing: border-box
width: 100px;
height: 100px;
margin: 10px;
border: 10px solid #000;
padding: 10px;
background: blue;
}
怪異盒模型
可以看到：
- 盒子的
總寬度為：width = 100 - 盒子的
總高度為：height = 100
