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

时间:2022-11-11 10:06:30

W3C规定的盒模型如下:

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

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

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

<!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即泡沫的厚度。

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

有的同学可能发现一个问题,两个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盒模型。

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