CSS百分比酒吧

我正在嘗試製作一個簡單的Css百分比酒吧。CSS百分比酒吧

OK轉到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>

正如你可以看到裏面欄紅色重疊的藍色邊框...爲什麼？：\

來源

2010-09-11 nn2

由W3C盒模型，邊距和填充添加到<div>的寬度。因此，而不是100％，寬度變得比這更多，並導致進度條溢出藍色邊框。

您必須將012px的3px邊距更改爲#perc上的3px填充，並刪除#perc_in上的填充。

這裏是更新的代碼（由Blaenk加）：

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

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

來源

2010-09-11 21:08:13 BoltClock

希望你別介意我爲你添加了代碼，經過測試和工作。 – 2010-09-11 21:10:52

啊太好了 - 太棒了。忘記填充/邊距。 – nn2 2010-09-11 21:12:19

@Blaenk：謝謝，看起來不錯。我也應該刪除有關伸展'＃perc'的部分，因爲它聽起來不對。 – BoltClock 2010-09-11 21:15:22

其原因是：W3C box model。它表示元素的最終寬度是width和padding屬性的總和。所以如果你聲明這個元素假設有width: 100%（確切的說：在這種情況下是667個像素），並且還聲明該元素應該從左側和右側（總共：6個像素）具有3像素填充，則該元素的最終寬度是： 667 + 3 + 3 = 673像素。

來源

2010-09-11 21:10:06 Crozin

CSS百分比酒吧

回答

相關問題