0

我不明白我应该如何使用 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中的示例

4

5 回答 5

4

box-sizing: border-box当您无法根据框的边距、边框和内边距指定确切的内容宽度时最有用，因为您事先不知道（也无法控制）这些值是什么。

在你的第一个例子中，如果你不知道盒子里有多少填充或它的边框有多厚，让它使用边框模型允许你只设置width: 50%以确保盒子总是占据 50% 的宽度它的容器，不管边界和填充。在第二个例子中，如果你设置width: 50%了内容的宽度；边框和填充将添加到它，导致它实际上扩展超过其容器宽度的 50%。

于 2012-08-30T11:22:53.727 回答
3

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

这等效于第二个示例（没有box-sizing:border-box;），其中总宽度为，1em + 3em + 1em = 5em即50%10em

于 2012-08-30T11:23:23.537 回答
3

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

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

于 2012-08-30T11:24:47.173 回答
0

实际上，当我们在垂直和水平方向的 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在这里使用属性，我们就不需要调整宽度，因为它不会计算 padding 的额外宽度。

看演示： -http: //tinkerbin.com/JtOC6ZJr

于 2012-08-30T11:49:00.777 回答
-1

使用灵活盒模型时需要注意的一个问题是，该模块仍然是一个草案，并且跨浏览器支持和实现仍然不完整。你可以找到一篇关于这个主题的好帖子http://webdevhub.co.uk/css3-flexible-box-model/

于 2012-09-08T10:24:23.627 回答