盒子模型

盒子模型

我们在这里将盒子模型主要分为标准盒子模型和IE盒子模型。

影响盒子模型尺寸大小的属性：content，padding，border，margin。

---

标准盒子模型 （W3C盒模型）

.box{
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 5px solid red;
    padding: 10px;
}

 

盒子的总宽度/高度 = content + padding + border + margin

在上述代码例子中，盒子的总宽度 = 100 + 10 x 2 + 5 x 2 + 20 x 2 = 170px ；盒子的总高度计算相同。

---

IE盒子模型

.box{
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 5px solid red;
    padding: 10px;
    box-sizing: border-box;
}

只需要在CSS代码中加入 box-sizing: border-box; 就可以将标准盒子模型转换为IE盒子模型；

同样，设置为 box-sizing: content-box;  （content-box是默认值）时，将IE盒子模型转换为标准盒子模型。 

 

同样的，盒子的总宽度/高度 = content + padding + border + margin

但此时实际的 content = content + padding + border，所以当 width: 100px 时，图中蓝色部分宽度为 70px 。

在IE盒子模型中 content = content + padding + border，这也是两种盒模型的区别所在，这样做的优势：padding 和 border 的改变不会改变元素的尺寸，不会打乱整体布局。