CSS 中的 box-sizing 属性是什么？

Question

是否有必要指定 a <div>s box-sizing？

它是干什么用的？

Answer 1

这是一个div叫做Blue：

div.Blue {
      width: 100px;
      height: 100px;
      background-color: blue;
}

这是一个div叫做Greenny：

div.Greenny {
    width: 100px;
    height: 100px;
    background-color: blue;
    border: 20px solid green;
}

Greenny是40px不是更宽，更高Blue，所以他决定节食：

div.GreennyAfterTheDiet {
    width: 100px;
    height: 100px;
    background-color: blue;
    border: 20px solid green;
    box-sizing: border-box;
}

现在他的width和height完全100px包括边界：

如您所见，这非常简单。同样的规则适用于padding.

更新：这是一个简单的用例：

<div>bla bla bla bla bla bla bla bla bla bla</div>
<div>bla bla bla bla bla bla bla bla bla bla</div>
<div>bla bla bla bla bla bla bla bla bla bla</div>
<div>bla bla bla bla bla bla bla bla bla bla</div>

div {
    width: 25%;
    float: left;
    background-color: #ffd862;
}

结果将如下所示：

但是如果你想添加一些padding：

看看发生了什么？现在我要补充box-sizing: border-box;：

现在两个divs 都有width: 25%了，但也都有了padding: 10px。