文檔流:元素按照其在 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;
}