-
.top{width:100%;height:100px;background:#ccc;} .main{background:#f00;height:500px;} .left{ width:200px;height:500px;position:absolute;left:0;top:100px;background:blue;} .right{background:#9C9;height:500px;margin-left:210px;} .foot{width:100%;height:50px;background:#F63;clear:both;}查看全部
-
這里是一個排版陷阱：當main里面設置了左右兩個div之后，這個時候不要忘記給main也設置和左右div一樣的高度，題中的main是沒有設置高度的，只設置了寬度，這個時候我們可以想象main其實就是一根高度為0的線條浮在top的下面，只是我們看不到，因為它沒有高度。而footer是浮在main下面的，并不是浮在左右兩個div下面，所以我們看到footer塊莫名其妙跑上來蓋住了左右兩個div，解決辦法如下： 第一，給main賦予和左右div同樣大小的高度，這個是最直接的方法，main的高度從0變成600px之后，自然把以它為參照、浮在它屁股下面的footer壓到下面去了； 第二，把footer的浮動清除掉，使用clear：both，這樣footer從一個跟著main浮起來的飛行物變成了失去翅膀的元素，不能浮動，它就只能自動找最長的參照物（也就是很長的左右div），然后折行顯示在底部了，一樣能達到效果。 如果還不懂，可以將main的高度設置為height：300px，就一目了然了，因為這個時候main變成了300px，而footer會跟著main低300px顯示在top下面。我們看不到main，不代表它不存在。查看全部
-
混合布局（其實就是嵌套）查看全部
-
margin:0 auto;是塊狀元素的居中對齊方式查看全部
-
.left{position:absolute; top:0; left:0;} .right{position:absolute; top:0; right:0;} .main{margin:0 310px 0 210px;}查看全部
-
三列布局（固定） 如需留空隙，則在第九行margin修改兩個像素值（如margin:0 310px 0 210px）查看全部
-
三列布局（瀏覽器自適應）查看全部
-
float:left/right查看全部
-
將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素，即為文檔流。（自己的理解是從頭到尾按照文檔的順序，該在什么位置就在什么位置，自上而下，自左到右的順序） 脫離文檔流：CSS樣式必須具有浮動（float）和絕對定位（position：absolute） 脫離文檔流也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。而對于使用position：absolute脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。查看全部
-
兩列布局（固定居中）查看全部
-
兩列布局（瀏覽器自適應寬高度）查看全部
-
Div{width:800px; height:500px; margin:0 auto}：實現居中對齊，主要參數為margin:0 auto查看全部
-
一列布局不適于存放文本，太長容易看走眼 一列布局： 1.通常作為網頁頭部。固定寬度。 2.真正開發，高度設置自動的。 兩列布局自適應，使用百分比。 三列布局，使用絕對定位和margin。 盒子之間的三種關系：1.相鄰；2.嵌套；3.疊加。我們要做的就是擺放好盒子的位置。 關于頁面上元素的加載順序： 元素是從前往后依次加載的，要想先加載就要寫在前面。 通常left部分是作為菜單，right部分作為主體內容，我們打開網頁，都希望先看到主體內容，所以有意把right部分寫在left部分前面，然后把right部分右浮動，left部分左浮動， 這樣布局不會出現問題，而且還解決了IE6下右浮動換行的問題。查看全部
-
UI設計師制定CSS規則（例如浮動、定位等）查看全部
-
常見的布局 分欄又稱為分列查看全部
舉報
0/150
提交
取消