盒子模型的理解：
1）概念：网页中的每一个元素都占据一定的空间，每一个元素都可以看作是一个盒子。
2）组成：一个元素占有的空间由width、padding、border、margin决定。
3）盒子模型分类：w3c标准盒子、ie盒子
box-sizing属性可以改变元素盒子模型，默认值为content-box(w3c标准盒子）,ie盒子模型对应border-box
content-box为一般浏览器默认的盒子模型，宽度仅仅包含盒子内容的宽度，而不包含border、padding、margin。
border-box盒模型宽度包含border、padding。
举个例子计算盒子宽高：
有一个box，width=200px，height=50px，padding=10px，border=10px，margin=20px
假如设置border-sizing 为 content-box：
盒子所占宽度：200 + 10*2 +10*2 +20*2 = 280px
盒子实际宽度：200 + 10*2 +10*2 = 240px
假设border-sizing为border-box：
盒子所占宽度：200 + 20*2 = 240px
盒子实际宽度：200px
