本文只是对盒模型进行简述，太深层次的概念和技术不做探讨。
什么是盒模型？
盒模型就是元素生成的一个矩形区域。它包括了四个部分：
- margin 外边距区域（边框外的区域，外边距是透明的）
- border 边框区域
- padding 内边距区域
- content 内容区域 （装文字图片等等乱七八糟的地方）
是的没错，margin外边距也是盒模型的一部分，虽然我们通常使用它来控制两个盒子之间的距离。
盒模型分类
盒模型有两种
- 标准盒模型（content-box）
- 怪异盒模型/IE盒模型（border-box）
标准盒模型
标准盒模型下，我们给元素设置的width、height是内容区域的宽高，没有包括padding区域和border区域。
所以元素的实际大小是由盒子的width、height、padding、border一起决定的。
如果给一个设置了宽高的盒子设置padding或者border，盒子就会被撑大。
举个例子：
我们现在有个盒子宽高是100px，我们加一点文字。现在它是这样：
我们给这个盒子设置一个padding内边距50px；
盒子被撑大了！？在实际开发的时候这种特性很明显不利于我们计算。
怪异盒模型/IE盒模型
怪异盒模型是IE浏览器为前端发展做出的为数不多的好事之一（狗头保命）。抛开IE6等老版本IE浏览器对前端开发人员的折磨不谈，IE浏览器推出的怪异盒模型，确实为我们带来了方便。
在怪异盒模型下，你设置的width、height就是这个盒子的真实宽高，无论你怎么去搞它的padding和border值，都不会影响盒子的实际大小。
还是这个盒子，我们设置为怪异盒模型：
box-sizing:border-box;
我们设置width、height都为100px。此时我们再给它加padding和border。
内边距也有，边框也有，但是盒子整体的大小还是我们给它设置的100px。
总结对比
标准盒模型 ： CSS设置的width和height只是content区域的宽高，没有包括padding和border。盒子真实的大小包括了：content + padding + border + margin
怪异盒模型 ：CSS设置的width和height包括了content+padding+border。盒子的真实大小就是width + margin。
这里所说的盒子大小是盒模型的大小，所以是包括了margin的。