Question

我不明白我应该如何使用box-sizing属性。因为：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css"> 
        div.container
        {
            width:10em;
            border:1em solid;
        }
        div.box
        {
            box-sizing:border-box;
            -moz-box-sizing:border-box; /* Firefox */
            -webkit-box-sizing:border-box; /* Safari */
            width:50%;
            border:1em solid red;
            float:left;
        }
        </style>
    </head>
    <body>

        <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        </div>

    </body>
</html>

相当于：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css"> 
        div.container
        {
            width:10em;
            border:1em solid;
        }
        div.box
        {
            width:3em;
            border:1em solid red;
            float:left;
        }
        </style>
    </head>
    <body>

        <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        </div>

    </body>
</html>

那么我应该何时使用该属性呢？我使用了w3 http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

中的示例

Answer 1

当您无法根据框的边距，边框和填充指定精确的内容宽度时，

box-sizing: border-box最有用，因为您事先并不知道（并且无法控制）这些内容值是。

在你的第一个例子中，如果你不知道框中有多少填充或边框有多厚，那么让它使用边框模型允许你设置{{ 1}}确保盒子总是占据其容器宽度的50％，无论边框和填充如何。在第二个示例中，如果您将width: 50%设置为内容的宽度;边框和填充将添加到它，使其实际扩展超过其容器宽度的50％。

Answer 2

在第一个示例中，您将宽度设置为50% 加上某些边框，但由于属性box-sizing:border-box;的存在，整个宽度包括< / em>内部边框，因此框为50％宽带边框（如果有的话，可选择填充）

这相当于第二个示例 - 没有box-sizing:border-box; - 其中总宽度为1em + 3em + 1em = 5em，即50%的{{1}}

Answer 3

box-sizing CSS属性用于更改用于计算元素宽度和高度的默认CSS框模型。可以使用此属性来模拟不正确支持CSS框模型规范的浏览器的行为。

注意：请勿使用http://www.w3schools.com/进行学习。有关详细信息，请参阅w3fools.com

Answer 4

实际上，当我们在垂直和水平的div元素中使用填充时，它会在总宽度和高度上添加填充。

like our div width is 100px and we give 5px padding from left and right side so div will calculate total of 100px + 5px + 5px = 120.

所以如果我们在这里使用box-sizing属性，那么我们就不需要调整宽度了，因为它不会计算填充的额外宽度。

请参阅演示： - http://tinkerbin.com/JtOC6ZJr

Answer 5

使用Flexible Box模型时的一个警告是，该模块仍然是草案，跨浏览器支持和实现仍然不完整。你可以找到关于主题http://webdevhub.co.uk/css3-flexible-box-model/

的好文章

CSS3 box-sizing属性

5 个答案: