在一个文档中，每个元素都被表示为一个矩形的盒子。就是常说的css盒模型
盒模型包含的有：
- margin（外边距）
- boder（边框）
- padding（内边距）
- 内容宽高
由于浏览器厂商原因，导致盒模型并不统一，常见的有两种：
普通盒模型
<div class="box">
.box {
box-sizing: content-box; // chrome默认为普通盒模型
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
