-
https://www.zhihu.com/question/24529373/answer/29135021查看全部
-
body{ }查看全部
-
margin 是邊緣的意思。查看全部
-
三列布局的 .left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} margin不為0注意加單位查看全部
-
三列布局，兩邊用絕對定位，中間一列自適應。查看全部
-
position（定位）查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局編程挑戰</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{background:#ccc;height:100px;} .main{background:red;width:100vw;position:relative;} .left{ background:blue;width:200px;position:absolute;top:0;} .right{background:#9acc99;margin-left:210px;} .foot{background:orange;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</div> <div class="left">左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</div> </div> <div class="foot">footfoot</div> </body> </html>查看全部
-
clear:both; //清楚浮動 總結： 單列布局用margin: 0 auto; 兩列布局用：float: left & float: right; 三列布局用： position: absolute; top:0; left:0px; right: 0px; margin-left:XXX; 混合布局： clear:both; position: relative;查看全部
-
三列布局：不能使用float； 左右兩列絕對定位，分別靠左和靠右，中間列為相對定位，左右margin分別設置為左右兩列的寬度即可，如果列與列之間需要間隔，則增加相應的margin值。查看全部
-
right 浮動的話會自己形成一個跟內容同樣大的框，如果要跟父框一樣要設置寬度為20%，不定位默認與父框100%查看全部
-
absolute 固定在左上角，left top 都為0，top不寫會被擠下去，父框設為固定的relative，可以相對父框，自適應的不要設置寬度，用浮動，增加一些margin查看全部
-
一列布局通常作為網頁的首頁，簡單明了，主題突出，適合放置簡單的內容查看全部
-
footer上面main里有四個div都用到了float，不占文檔層，即浮動在最上面。footer如果不用清除層的話，會自動緊跟top層(此層沒用到float)。故footer要用clear:both ,把浮動層都去掉，自己再另占一行。查看全部
-
混合布局查看全部
-
清除浮動： 1.clear:both 2.width:100%;overflow:hidden. 3.overflow:none查看全部
舉報
0/150
提交
取消