两种css盒子模型

盒子模型的理解：

   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