css 百分比减去像素

html-css010

css 百分比减去像素,第1张

把以下代码运行试试看是不是你所需要的效果！

将溢出的部分用overflow:hidden隐藏掉！

一般最好不要用百分比划分页面，因为在IE和FF显示效果会不一样！

<html>

<head>

<style>

<!--

body{

text-align:center

margin:0px

padding:0px

}

#main{

width:800px

height:600px

border:1px solid #f00

margin:0px auto

padding:0px

overflow:hidden

}

#banner{

width:100%

height:15%

background-color:Fcc8ff

border-bottom:1px solid #f00

text-align:center

color:#000

font:20px 黑体

}

#content{

width:100%

height:100%

}

#left{

width:15%

height:100%

float:left

background-color:#eec2dd

border-right:1px solid #f00

}

#right{

height:100%

float:right

}

-->

</style>

</head>

<body>

<div id="main">

<div id="banner">banner部分</div>

<div id="content">

<div id="left">左菜单</div>

<div id=""right">右主体</div>

</div>

</div>

</body>

</html>

最简单的记忆的方法是：只要这个属性设置了宽度又设置了边距，就必须减去这10像素。

因为一个完整的模块实际宽度是由它的你设置的宽度+内边距+外边距+边线，所以说假如你设置的宽度是他本来的实际宽度的话，如果你想加上内边距，外边距或者边线，你就必须从你设置的宽度里减去他们。

当然你如果你在这个属性里没有设置宽度就不用加减去了，因为它会按照父级的宽度来自适应的。