简介
盒模型分为以下两种：W3C标准盒模型、IE盒模型，但无论是哪种盒模型，其都是由四个部分组成的：分别是content、padding、border和margin
IE盒模型和W3C标准盒模型的区别
标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同
W3C标准盒模型
其width和height属性的范围只包含了content，不包含padding和border。也就是说我们设置的width属性值为多少，盒模型的content部分就是多宽的；height属性值为多少，盒模型的content部分就是多高的
IE盒模型
给IE盒模型设置的width和height属性的范围包含了border、padding和content，也就是说width值对应的是content + padding + border
box-sizing属性
在当前W3C标准中盒模型是可以通过box-sizing属性自由切换的，其默认值是content-box即标准盒模型；该属性还有一个值为border-box，设置该值则代表该元素将要使用IE盒模型来进行布局
content-box（默认值，标准盒模型）
border-box（IE盒模型）
盒子的大小
很多时候，我们在谈论盒子的大小时总是会把margin算进去，但是这样真的对吗？
比如我先在问你下面代码中element元素对应盒子的大小是多少？
<style>
.element {
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 10px solid #ccc;
background-color: orange;
}
</style>
<body>
<div class="element"></div>
</body>
肯定会有很多同学说是160 x 160 px，因为是盒模型嘛，当然是要算上整个盒子的所有部分啦，于是盒子的长度就是10 + 10 + 10 + 100 + 10 + 10 + 10 = 160 px，盒子的宽也同理，但这个答案是错误的！
CSS盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距组成）。但盒子的大小却只由content + padding + border这几部分决定，而不包括margin。特别注意：把margin算进去的那是盒子占据的位置，而不是盒子的大小，所以上面盒子的大小应该是140 x 140 px才对
标准盒
看了前面的介绍，我们现在应该能够快速的说出标准盒模型的大小——长度为width+ padding + border，宽度为height+ padding + border，盒子占据的位置还需要算上margin
IE盒
由于IE盒的width和height属性是包括了content、padding和border部分的，所以IE盒子的大小就为width x height，同理，其占据的位置也要算上margin
