css盒子内减法怎么算

html-css012

css盒子内减法怎么算,第1张

盒模型(CSS盒模型,也叫CSS盒子)

元素盒模型的宽度

=

width值

+

左右内

边距

+

左右边框值

+

左右外边距值

元素盒模型的高度

=

height值

+

上下内边距值

+

上下边框值

+

上下外边距值

根据公式求相应值即可(你说的减法是要求其中的某个值吧?)

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

将溢出的部分用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>