CSS Box Sizing

通过设置CSS中box-sizing属性可以把padding内边距和border边框的尺寸都囊括在元素的高宽属性值内。

不设置box-sizing属性的情况

默认情况下，都是没有设置box-sizing属性的，这种情况下：

• 元素的实际宽度 = 元素的width属性值 + 左右padding内边距 + 左右border边框
• 元素的实际高度 = 元素的height属性值 + 上下padding内边距 + 上下border边框

这种情况所谓的设置元素高宽，设置的只是元素的width属性值或者height属性值。而元素的实际宽度和实际高度则很可能大于预设的宽度和高度的属性值。

这种情况下，上述两个div元素都会因为padding和border，而元素实际宽度都大于300px，div1元素宽度会等于422px（300px + 1px * 2 + 60px * 2 ），div2元素宽度会等于326px（300px + 10px * 2 + 3px * 2），源码如下：

#div1 {
    width: 300px;
    height: 100px;
    border: 1px solid #46acb6;
    padding: 60px;
}

#div2 {
    width: 300px;
    height: 100px;
    border: 10px solid Tomato;
    padding: 3px;
}

运行一下

设置box-sizing属性

将box-sizing属性设置成border-box就可以把内边距和边框的尺寸都囊括在元素的高宽属性值内。这种情况下：

• 元素的实际宽度 = 元素的width属性值 = 左右padding内边距 + 左右border边框 + 元素content内容部分宽度
• 元素的实际高度 = 元素的height属性值 = 上下padding内边距 + 上下border边框 + 元素content内容部分高度

因此，box-sizing:border-box模式更为常用，这样更容易指定元素的实际尺寸。

在border-box取值下，上述两个div元素的实际宽度会和宽度属性保持一致，因此上述两者div元素的宽度都等于300px，源码如下：

#div1 {
    width: 300px;
    height: 100px;
    border: 1px solid #46acb6;
    padding: 60px;
    box-sizing: border-box;
}

#div2 {
    width: 300px;
    height: 100px;
    border: 10px solid Tomato;
    padding: 3px;
    box-sizing: border-box;
}

运行一下

---

更加推荐把box-sizing取值border-box，如此更容易指定元素的实际尺寸。最佳的实践方式是把所有的元素的box-sizing属性都设置成border-box这个值，此乃明智之道。

---

如果想把所有元素的box-sizing属性都提前设置成border-box这个值，可如下所示：

* {
    box-sizing: border-box;
}

运行一下