CSS 百分比条答案

【问题标题】：CSS Percentage BarsCSS 百分比条
【发布时间】：2010-09-12 05:16:06
【问题描述】：

我正在尝试制作一个简单的 Css 百分比条。

好的去http://htmledit.squarefree.com/ 并将其复制/粘贴到其中：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<style>
#perc {
width:667px;
border:4px solid blue;
}
#perc_in {
width:100%;
padding:3px;
font-size:17pt;
background:red;
margin:3px;
}
</style>

</head>
<body>
<div id="perc"><div id="perc_in">100%</div></div>
</body>
</html>

如您所见，红色内栏与蓝色边框重叠...为什么？ :\

【问题讨论】：

标签： html css

【解决方案1】：

根据 W3C 盒子模型，边距和内边距会增加 <div> 的宽度。因此，宽度不是 100%，而是变得更大，并导致进度条溢出蓝色边框。

您必须将 #perc_in 的 3px 边距更改为 #perc 上的 3px 内边距，并移除 #perc_in 上的内边距。

这是更新后的代码（由 Blaenk 添加）：

#perc {
    width:667px;
    border:4px solid blue;
    padding:3px;
}

#perc_in {
    width:100%;
    font-size:17pt;
    background:red;
}

【讨论】：

希望你不介意我为你添加了添加的代码，经过测试并且可以工作。
啊太棒了——太棒了。忘记了填充/边距。
@Blaenk：谢谢，我觉得不错。我还应该删除有关拉伸#perc 的部分，因为它听起来不对。

【解决方案2】：

原因是：W3C box model。它说元素的最终宽度是width 和padding 属性的总和。因此，如果您声明该元素假设具有width: 100%（准确地说：在这种情况下为 667 像素）并且还声明该元素应该具有左右 3 像素的填充（总计：6 像素）元素的最终宽度是：667 + 3 + 3 = 673 像素。

【讨论】：