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

Question

是否需要指定一个<div> s box-sizing ？

它有什么用？

Answer 1

这是一个名为 Blue 的 div:

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

这是一个名为 Greenny 的 div:

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

Greenny 比 Blue 宽 40px 高，所以他决定节食:

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

现在他的宽度和高度正好是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;:

现在两个 div 都再次具有 width: 25%，但它们也都有 padding: 10px。