文档流:元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下,一行接一行,每一行从左至右。
不脱离文档流就只有三种情况:块级、行内和相对定位。
不脱离文档流就只有三种情况:块级、行内和相对定位。
.top{width:auto; height:100px;background:#ccc;}
.main{width:auto; height:400px;background:red;}
.left{width:200px;height:400px;background:blue;position:absolute;}
.right{margin-left:210px;width:100%;height:400px;background:#9c9;position:absolute;}
.foot{width:auto; height:50px;background:#f63;}
.main{width:auto; height:400px;background:red;}
.left{width:200px;height:400px;background:blue;position:absolute;}
.right{margin-left:210px;width:100%;height:400px;background:#9c9;position:absolute;}
.foot{width:auto; height:50px;background:#f63;}
.head,.main{ width:960px; margin:0 auto;}
.left{ width:220px; height:600px; background:#ccc; float:left;}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right;}
.footer{ height:50px; background:#9F9; clear:both}
.left{ width:220px; height:600px; background:#ccc; float:left;}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right;}
.footer{ height:50px; background:#9F9; clear:both}
任务三:
.right{
background:#3C9;
height:400px;
left:210px;
position:absolute;
right:0;
}
.right{
background:#3C9;
height:400px;
left:210px;
position:absolute;
right:0;
}