浅析CSS盒模型及box-sizing属性

W3C规定的盒模型如下：

我们现在从外往内依次说明，最外层是margin，即外边距；往里是border，即边；继续往里是padding，即内边距；最里层是content，即内容区域；width和heigh是content的宽和高。

用一个比喻来形容盒模型非常贴切。代码如下：

  
    
    
    
  
  
    

      

          

            贵重物品
          
      
      
div2
    
  

页面中有个div叫container，它里面有两个div，都叫div1，其中一个div1里包含一个innerDiv，实际显示结果如下。把container看做一个仓库的话，把两个div1就是仓库中的两个盛东西的纸箱子，innerDiv就是纸箱子里的贵重物品。那么margin就是箱子距离仓库的墙或者其它箱子的距离，boder就是纸箱子纸的厚度，content就是箱子里的贵重物品（innerDiv），在存放贵重物品时，箱子里还会加一层塑料泡沫来保护物品，padding即泡沫的厚度。

有的同学可能发现一个问题，两个div1都设置了边距为50px，它俩之间的距离是不应该是100px吗？

还是用上面那个比喻，箱子之间的距离设为50px,两个箱子的距离自然就是50px，不会是100px。

可以这么去理解，但是肯定不能这么解释。两个div1的距离为50px是边距重叠合并的结果，重叠合并有一套规则，不了解的同学可以百度一下。

上面就是W3C的盒模型了。IE的盒模型与W3C标准盒模型区别就在于：

W3C盒模型的width和height是content的宽和高；

IE盒模型的width和height是（border+padding+content）的宽和高。

有一个属性box-sizing可设置使用哪种盒模型：

      box-sizing:content-box;即使用W3C标准盒模型，

      box-sizing:border-box;即使用IE盒模型。

关于盒模型的讲解就到这，有疑问的可以给我留言。