Html CSS3盒大小属性_Html_Css_Properties

Html CSS3盒大小属性

html css properties

Html CSS3盒大小属性,html,css,properties,Html,Css,Properties,我不明白应该如何使用框大小属性。因为： <!DOCTYPE html> <html> <head> <style type="text/css"> div.container { width:10em; border:1em solid; } div.box { box-s

我不明白应该如何使用框大小属性。因为：

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


分区集装箱
{
宽度：10em；
边框：1米实心；
}
分区箱
{
框大小：边框框；
-moz框大小：边框框；/*Firefox*/
-webkit框大小：边框框；/*Safari*/
宽度：50%；
边框：1米纯红；
浮动：左；
}
1.
2.

相当于：

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


分区集装箱
{
宽度：10em；
边框：1米实心；
}
分区箱
{
宽度：3em；
边框：1米纯红；
浮动：左；
}
1.
2.

那么我应该什么时候使用这个属性，而这正是我应该做的？我使用了w3中的示例：框大小：当无法基于框的边距、边框和填充指定精确的内容宽度时，边框框最有用，因为您事先不知道（也无法控制）这些值是什么

在第一个示例中，如果您不知道框中有多少填充物或框的边框有多厚，那么使用边框框模型只需设置

width:50%

，以确保框始终占据其容器的50%宽度，而不考虑边框和填充物。在第二个示例中，如果设置了

width:50%

，则为内容的宽度；边框和填充将添加到它，导致它实际扩展超过其容器宽度的50%。

在第一个示例中，您将宽度设置为

50%

加上一些边框，但这是由于存在属性

框大小：border box

整个宽度包括内部边框，因此框宽为

%，带有边框（如果有，还可以选择填充）

这相当于第二个示例-没有

框大小：边框框-其中总宽度为1em+3em+1em=5em
，即10em
的50%
，CSS属性用于更改用于计算元素宽度和高度的默认CSS框模型。可以使用此属性模拟不正确支持CSS框模型规范的浏览器的行为
注意：不要用于学习。有关更多详细信息，请参见
实际上，当我们在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.

因此，如果我们在此处使用框大小调整
属性，则不需要调整宽度，因为它不会计算填充的额外宽度
请参阅演示：-
使用Flexible Box模型时需要注意的一点是，该模块仍然是一个草稿，跨浏览器支持和实现仍然不完善。你可以找到一篇关于这个主题的好文章
，如果可能的话，切换到其他教程/参考（我推荐）。学校经常发布不准确或误导性的内容。阅读更多关于。