<html>
<head>
<style>
#headarea{
width:100%;
height:20%;
border:1px solid red;
}
#leftarea{
width:30%;
height:100%;
border:1px solid red;
float:left;
}
#mainarea{
width:70%;
height:100%;
float:right;
}
#maintemp{
width:100%;
height:60%;
border:1px solid blue;
}
#tailarea{
width:100%;
height:20%;
border:1px solid red;
}
</style>
</head>
<body>
<div id="headarea">
这是head
</div>
<div id="maintemp">
<div id="leftarea">
这是left
</div>
<div id="mainarea">
这是main
</div>
</div>
<div id="tailarea">
这是tail
</div>
</body>
</html>
以上代码在360浏览器7.1版正常运行!
中间涉及到了一点儿关于float的东西,这些东西就是盒子套盒子!
关于浮动:
首先你要给出一个大盒子,当然整个页面也是一个大盒子,但是这个盒子不一定是你想要的额!所以你先确定一个一个盒子,盒子确定了,你开始划分区域!
不管你是左漂还是右漂,结果都是漂不出你定义的盒子对不对?
网上说:使用百分比可能会出间隙,
原因0:边框啊什么的一些固定宽度
原因1:使用百分比时,对像素的计算采用四舍五入! 没有深入了解,如果有误,希望大家提点!