什么是盒模型？
CSS 盒模型本质上是一个盒子，盒模型主要由：外边距 margin、边框 border、内边距 padding、内容 content 组成，具体看下图
盒模型.png
盒模型的分类
盒模型分为标准盒模型和怪异盒模型
1. 标准盒模型
举个栗子来看
<div class="box"></div>
.box {
width: 300px;
height: 300px;
background: #a4c639;
border: 1px solid red;
padding: 10px;
margin: 20px;
}
box 最终的宽高是多少呢，看图可知是 322x322
标准盒模型图1.png
对应的盒模型
标准盒模型图2.png
最终盒子的大小等于 content + padding + border，不包含 margin
2. 怪异盒模型
在ie8+浏览器中使用哪个盒模型可以由 box-sizing 控制，默认值为 content-box，即标准盒模型；如果将 box-sizing 设为 border-box 则用的是怪异盒模型
同样举个栗子
<div class="box"></div>
.box {
width: 300px;
height: 300px;
background: #a4c639;
border: 1px solid red;
padding: 10px;
margin: 20px;
box-sizing: border-box
}
box 的宽高如图
怪异盒模型图1.png
对应的盒模型
怪异盒模型图2.png
最终盒子的大小等于我们设定的 width 和 height
总结
标准盒模型的大小等于：content + padding + border
怪异盒模型的大小等于：我们设置的 width、height
