两种盒子模型
我们可以把每个HTML元素都看成是一个矩形盒子，这个矩形盒子由四部分组成：内容content，内边距padding，边框border，外边距margin。
而盒模型又分为两种：标准盒模型和IE盒模型。
标准盒模型
对标准盒模型，由height和width构成content，即元素的width属性只能设置content的宽度。如果此时没有设置盒模型的其他属性，那么盒子的大小就是content的大小。此时的盒子是这样的：
.box{
background-color: red;
width: 100px;
height: 100px;
}
当我们添加padding，border，margin等属性时，再看看此时的盒子：
.box{
background-color: red;
width: 100px;
height: 100px;
padding: 30px;
border: 10px solid black;
margin: 20px;
}
最里面的矩形区域是content，从内到外依次增加了padding：30px，border：10px，margin：20px。
由此我们可以得到标准盒模型的一个特点，内容content的大小会被定死，由width和height决定。如果要另外设置padding等属性，整个盒模型会不断占据更多的空间。
所以标准盒模型的总宽度=width+padding+border+margin，但是要注意，盒子的大小不包括margin，整个盒模型所占据的空间才要算上margin。因为margin通常是用来增大或缩小不同盒子之间的距离的。
IE盒模型
上面我们讲到，标准盒模型的width只包含content，而IE盒模型的width包括了padding和border。为了更直观地理解，我们直接上代码上图：
.box{
box-sizing: border-box; //设置用哪种盒模型，border-box为IE盒模型，默认为content-box标准盒模型
background-color: red;
width: 100px;
height: 100px;
}
上面是只设置了height和width，没有设置其他属性，下面我们设置padding等属性：
.box{
box-sizing: border-box;
background-color: red;
width: 100px;
height: 100px;
padding: 30px;
border: 10px solid black;
margin: 20px;
}
最里面的矩形是内容content区域，原本内容content区域是height和width组成的100x100矩形，设置为padding，border，margin之后，content区域被挤压成20x20的矩形。
这说明IE盒模型的特点是，height和width组成的矩形就是整个盒子（注意是整个盒子，不是整个盒模型），如果要设置padding，border属性，就会不断挤压content区域。
所以IE盒模型的总宽度就是我们设置的width+margin。而width=内容的宽度+border+padding。
总结
- 标准盒模型的width只包括内容，此外设置padding等属性会不断扩大整个盒子占据的空间。
- IE盒模型的width包括内容，padding和border，增大padding和border会挤压内容区域的空间。
- 整个盒模型包括内容，内边距padding，边框border，外边距margin。
- 盒子的大小不包括margin，但是整个盒模型要算上margin。
- 一般我们要尽量用标准盒模型。box-sizing：content-box。这样可以避免不同的浏览器不兼容的问题。
