CSS Percentage Bars
I am trying to make a SIMPLE Css percent bar.
OK go to http://htmledit.squarefree.com/ and copy/paste this in it:
<!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>
As you can see the red inside bar is overlapping the blue border... why? :\
By the W3C box model, margins and padding add to the width of a <div>. So instead of 100%, the width becomes more than that, and causes the progress bar to overflow the blue border.
You'll have to change the 3px margin of #perc_in to a 3px padding on #perc, and remove the padding on #perc_in.
Here is the updated code (added by Blaenk):
#perc {
width:667px;
border:4px solid blue;
padding:3px;
}
#perc_in {
width:100%;
font-size:17pt;
background:red;
}
The reason is: W3C box model. It says that final width of an element is a sum of width and padding properties. So if you declare that element suppose to have width: 100% (to be exact: 667 pixels in this case) and also declare that element should have 3-pixel padding from left and right (total: 6 px) the final width of the element is: 667 + 3 + 3 = 673 pixels.
加载中,请稍侯......
精彩评论