CSS盒模型

什么是盒模型

当对一个文档进行布局(laying out)的时候,浏览器渲染引擎会根据CSS-Box模型(CSS Basic Box model)将所有元素表示为一个矩形盒子(box)。CSS决定这些盒子的大小,位置以及属性(颜色,背景,边框尺寸...)。

盒模型包括哪些

内容(content)、内边距(padding)、边框(border) 和 外边距(margin)。

盒模型的种类

1. W3C 标准盒模型 : 属性width,height只包含内容content,不包含border和padding。

2. IE 盒模型: : 属性width,height包含border和padding,指的是content+padding+border。

box-sizing不同属性下盒模型宽高的计算方式


        /* 关键字 值 */
        box-sizing: content-box;
        box-sizing: border-box;
    

1.content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

2.border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

下面我门来举个例子:


      .box1 {
        width: 100px;
        height: 100px;
        padding: 50px;
        border: 5px solid #000;
        box-sizing: content-box;
        background: red;
      }
    

width = 2*border + 2*padding + width = 2*5+2*50+100 = 210

height = 2*border + 2*padding + height = 2*5+2*50+100 = 210


      .box2 {
        width: 100px;
        height: 100px;
        padding: 50px;
        border: 5px solid #000;
        box-sizing: border-box;
        background: blue;
      }
    

width = 2*border + width = 2*5+100 = 110

height = 2*border + height = 2*5+100 = 110

通过以上例子,为了在浏览器中得到我们想要的准确的渲染效果。我们这里建议将元素的box-sizing都设为border-box