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

W3C规定的盒模型如下：

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>盒模型浅析</title>
    <style>
        .container{
          border: 1px solid black;
          width: 300px;
        }
        .div1{
          height: 100px;
          margin: 50px;
          padding: 20px;
          border: 1px solid red;
        }
        .innerDiv{
          height: 100%;
          width: 100%;
          background: #d3d3d3;
        }
    </style>
  </head>
  <body style="margin:0;padding:20px;">
    <div class="container">
      <div class="div1">
          <div class="innerDiv">
            贵重物品
          </div>
      </div>
      <div class="div1">div2</div>
    </div>
  </body>
</html>

页面中有个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盒模型。

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

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

猜你喜欢