1、什么是盒子模型？
所谓盒子模型，即是将网页布局中的元素（能设置宽高的元素）进行拟物化的比喻。
盒子模型的组成？
一个盒子是由四个部分组成：
① “内容--content”（盒子内的物件）、
② “内间距--padding”（物件和盒子的距离）、
③ “边框--border”（盒子壁）、
④ “外间距--margin”（盒子和其它物体的距离）
2、标准盒子模型是什么样的？(也称w3c盒模型)
在标准的盒子模型中：
最终盒子的“width”和“height”=我们给元素设置的宽高 + padding + border；
换句话说：
在标准模型下，我们给元素设置的宽高只会作用到内容content上,如果元素padding和border有值的话，那么这些值是另外算的
3、标准盒子模型使用举例
如下图所示：我们给元素设置的100px的宽高在标准盒子模型下之后作用到内容上，和padding与border是不相干的。
<style>
div{
border: 10px red solid;
padding: 10px;
width: 100px;
height: 100px;
box-sizing: content-box; /* 标准盒子模型（默认也是这个值） */
}
</style>
<div>
hello
</div>
4、标准盒子模型示例效果演示
从下图我们看出，100像素确实只作用到元素的内容上了，padding和border是另外计算的。
即：
最终盒子的“width”和“height”=我们给元素设置的宽高 + padding + border；
5、怪异盒模型又是什么样的？（也称之为IE盒模型）
由于一些“客观”的原因，IE浏览器和标准的盒子模型有一定的差异。
IE浏览器盒子模型
最终盒子的width”和“height == 我们给元素设置的宽高
换句话说：
在标准模型下，我们给元素设置的宽高为content+padding+borderde
6、怪异盒模型使用举例
<style>
div {
border: 10px red solid;
padding: 10px;
width: 100px;
height: 100px;
/* box-sizing: content-box; 标准盒子模型（默认也是这个值） */
box-sizing: border-box;/* IE盒子模型（也称之为怪异盒子模型） */
}
</style>
<div>
hello
</div>
7、怪异盒模型示例效果
从下图可以看出，在IE这种怪异盒模型下，我们设置的宽高变成了
100px == 内容宽高 + border + padding
8、开发时选择什么盒子模型？
开发时，在大部分情况下，为了更好的控制，我们一般选择的是IE盒模型。当然，这并不绝对。
