-
文檔流：將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流. 浮動（float）和 絕對定位（position：absolute）-->脫離文檔流 浮動和絕對定位脫離文檔流的區別 相同點：其他盒子都會無視被浮動或絕對定位的盒子； 不同點：盒子的內容會考慮被浮動的盒子，但任然會無視絕對定位的盒子。 相對定位（position：relative），不可以脫離文本流查看全部
-
需要塊狀元素并列排列時需要浮動，浮動后，為了不影響后面的元素都要設置清除浮動。查看全部
-
這里是一個排版陷阱：當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，不代表它不存在。查看全部
-
浮動后面的元素如果不清楚浮動 就會當前面的元素不存在而占用其位置. 本例中main未設置高度,footer未清除浮動其css效果就會占用main位置 清除浮動方式： clear:both overflow:hidden 在有些情況下只能是用overflow:hidden來清除浮動查看全部
-
三列布局，左右兩側固定寬度，中間自適應的參考做法： 左邊：position:absolute;left:0px;top:0px;width:200px; 中間：設置外邊距： margin:0 305px 0 205px; 右邊：position:absolute;right:0px;top:0px;width:300px;查看全部
-
文檔流：將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流. 浮動（float）和 絕對定位（position：absolute）-->脫離文檔流 脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。 浮動會脫離標準文檔流，但是任然具有文檔流性質，即還是會占據文檔位置； 絕對定位脫離標準文檔流后不再具備文檔流性質，不占據文檔位置，直接與其他元素進行層堆疊。 需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。而對于使用absolute positioning脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。查看全部
-
兩列布局： body{margin:0;padding:0}清除默認樣式 自適應寬度：將寬度設為百分比【用的很少，一般用固定寬度的兩列布局】。 固定寬度：套一個父級，設置寬度和自動居中。left和right增加一個父div#main,設置這個main的width，以及margin 0 auto；如果要精確控制left和right的寬度，可以使用px【就是說也可以使用%粗略控制?！?查看全部
-
水平居中： .main,.footer{ width:960px; margin:0 auto;}查看全部
-
布局：又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合。 特點：1、網頁可以自適應寬度 2、網頁的長度理論上可以無限延長 分欄又稱分列，常見布局有：一列布局、二列布局、三列布局，但更多的是混合布局查看全部
-
沒有給子盒子定義寬度，默認為父元素寬度的100%。查看全部
-
position:absolute folat 能使盒子上浮，不排斥下方盒子的margin.查看全部
-
.left{ width:200px; height:600px; background:#ccc;position:absolute; left:0; top:0} .main{ height:600px; margin:0px 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}查看全部
-
三列布局查看全部
-
《一列布局》水平居中：margin:0 auto;查看全部
-
一列布局：簡單明了。（通常寬度是固定的，百度首頁）查看全部
舉報
0/150
提交
取消