CSS填充和宽度_Css - Fatal编程技术网

CSS填充和宽度

css

CSS填充和宽度,css,Css,考虑下一个代码： #container { width:500px; } #inside { padding:10px; width:100%; } 如果我选择宽度：100%；它将与声明“宽度480:px”（即，已计算填充）相同，还是与声明“宽度500px”相同谢谢 Joel它将像宽度：500px一样，添加填充物将推动#容器的内部溢出但是，如果#inside是一个块元素，那么只需给出填充就可以使其表现为宽度：480px 例如，在处，它将类似于宽度：500px，添加填充

考虑下一个代码：

#container {
    width:500px;
}

#inside {
   padding:10px;
   width:100%;
}

如果我选择宽度：100%；它将与声明“宽度480:px”（即，已计算填充）相同，还是与声明“宽度500px”相同

谢谢

Joel

它将像

宽度：500px

一样，添加填充物将推动

#容器的内部溢出
但是，如果#inside
是一个块元素，那么只需给出填充就可以使其表现为宽度：480px

例如，在处，它将类似于宽度：500px
，添加填充物将推动容器内部溢出
但是，如果#inside
是一个块元素，那么只需给出填充就可以使其表现为宽度：480px

例如，如果它是块级元素，它将与父容器的宽度相同。因此#内部将有500px宽，每侧有10px的填充物
 如果它是块级元素，它将与父容器的宽度相同。因此#内部将有500px宽，每侧有10px的填充物
 我把它放在一个示例文档中，容器div只调整了3个面（左、上、下）。。内部div将容器外部的边界向右推了20 px
我测试了IE8、Firefox 3.6.10和最新的Chrome浏览器。使用各种doctype没有效果
我使用的代码是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Untitled</title>
    <style>
        #container {
            width:500px;
            border: solid 1px blue;
        }

        #inside {
           padding:10px;
           width:100%;
           border: solid 1px red;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="inside">
        Hello World!
    </div>
</div>
</body>
</html>


无标题
#容器{
宽度：500px；
边框：纯色1px蓝色；
}
#里面{
填充：10px；
宽度：100%；
边框：实心1px红色；
}
你好，世界！

注意：如果您从#inside div中删除宽度声明，那么您将得到您想要的。这是一个内部div，宽度为480px，每侧为10 px，用于填充。有关它的更多信息，请参见此链接：。
我将其放在示例文档中，容器div只调整了三个面（左、上、下）。。内部div将容器外部的边界向右推了20 px
我测试了IE8、Firefox 3.6.10和最新的Chrome浏览器。使用各种doctype没有效果
我使用的代码是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Untitled</title>
    <style>
        #container {
            width:500px;
            border: solid 1px blue;
        }

        #inside {
           padding:10px;
           width:100%;
           border: solid 1px red;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="inside">
        Hello World!
    </div>
</div>
</body>
</html>


无标题
#容器{
宽度：500px；
边框：纯色1px蓝色；
}
#里面{
填充：10px；
宽度：100%；
边框：实心1px红色；
}
你好，世界！

注意：如果您从#inside div中删除宽度声明，那么您将得到您想要的。这是一个内部div，宽度为480px，每侧为10 px，用于填充。有关详细信息，请参阅此链接：。
不完全正确。它根本不会推动容器的内部。相反，#内部将结束于容器外部。@Chris，的确。。。这是一种修辞手法，但在这种情况下并不合适。。编辑：）顺便说一句，我正在挖掘jsfiddle.net。看起来是一种非常好的代码呈现方式。那么规则是什么呢？我认为将width属性留空会导致“width:100%”@Joel，将其留空会导致总宽度为100%。包括边框和衬垫。。所以这就是路…不完全是这样。它根本不会推动容器的内部。相反，#内部将结束于容器外部。@Chris，的确。。。这是一种修辞手法，但在这种情况下并不合适。。编辑：）顺便说一句，我正在挖掘jsfiddle.net。看起来是一种非常好的代码呈现方式。那么规则是什么呢？我认为将width属性留空会导致“width:100%”@Joel，将其留空会导致总宽度为100%。包括边框和衬垫。。这就是我们要走的路。。