CSS中的box-sizing属性是什么? [英] What is the box-sizing property for in CSS?

问题描述

是否需要指定< div> 的 box-sizing ?

它是做什么用的?

推荐答案

这是一个称为 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 宽40像素并更高，因此他决定节食:

Greenny is 40px wider and higher than Blue, so he decided to go on a diet:

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

现在，他的 width 和 height 恰好是 100px (包括边框):

Now his width and height are exactly 100px including borders:

这很简单，如您所见.相同的规则适用于 padding .

It's pretty simple, as you can see. The same rule works for padding.

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

UPDATE: Here's a simple use case:

<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 :

But if you want to add some padding:

看看发生了什么事?现在，我将添加 box-sizing:border-box; :

See what happened? Now I'll add box-sizing: border-box;:

现在两个 div 都再次具有 width:25％，但是它们两个都都具有 padding:10px .

And now both divs have width: 25% again, but both also have padding: 10px.

这篇关于CSS中的box-sizing属性是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！