Question

我正在尝试制作一个SIMPLE 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>

正如你所看到的，红色内侧栏与蓝色边框重叠......为什么？：\

Answer 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;
}

Answer 2

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

CSS百分比条

2 个答案: