-
文檔流：將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流. 浮動（float）和 絕對定位（position：absolute）-->脫離文檔流 浮動和絕對定位脫離文檔流的區別 相同點：其他盒子都會無視被浮動或絕對定位的盒子； 不同點：盒子的內容會考慮被浮動的盒子，但仍然會無視絕對定位的盒子。查看全部
-
混合布局： 將一列布局改造就變成了混合布局。 主體部分加上子div 要點回顧： 其實在網頁制作當中，頁面中的元素就是塊與塊之間的關系： 塊挨著塊；塊嵌套著塊；塊疊壓著塊 通過css將這些塊擺放正確，網頁布局就自然完美了。 1、margin:0 auto 自動居中 2、兩種分成三欄的方式： 1）兩邊position：absolute，left：0 top：0 right：0 中間margin｛0 右邊 0 左邊｝ 2）先分兩欄 左右float 再分兩欄左右float ※：自適應布局不能使用float查看全部
-
兩列的則用float實現，三列以上float失效，需要運用到absolute，中間部分再使用margin調試。 position：absolute；是絕對定位， left：0；是左邊的div距離左邊有0距離， 題目要求：main水平居中在瀏覽器中央，并且與左右div有10px的間距 210px=左部分的寬度200px+10px間距 .left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} 310=右部分的寬度300px+10px間距 .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} 如果左外邊距小于200px，右外邊距小于300px，main和左右兩邊就沒有間距了，甚至main中的部分內容會被遮蓋掉，當然，左大于200px,右大于300px,可以看到效果的。但是也不要把數值設太大。 左側絕對定位：position：absolute;left:0;top:0; 右側絕對定位：position：absolute;right:0;top:0; 中間寬度定義auto，定位：margin值：margin:0 10px 0 10px; 上右下左查看全部
-
1.三列布局 代碼如下 <head> <style type="text/css"> body{margin:0;padding:0} .left{width:33.33%;height:500px;float:left;background:#ccc} .middle{width:33.33%;height:500px;float:left;background:#999} .right{width:33.33%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </body> </html> 2.特殊的三列布局 左右列固定寬度，中間列自適應。 左側絕對定位：position：absolute;left:0;top:0; 右側絕對定位：position：absolute;right:0;top:0; 中間寬度定義去掉，定義為auto，加上左右的margin值，margin:0 310px 0 210px; 上右下左（中間空一點出的話，增加margin屬性值便可以實現） 左右兩側布局固定寬度，中間部分寬度自適應。則需要采用絕對定位來實現，把左右設置為絕對定位 如下代碼 body{margin:0;padding:0} .left{width:200px;height:500px;background:#ccc;position:absolute;left:0;top:0} .middle{height:500px;background:#999;margin:0 300px 0 200px} .right{width:300px;height:500px;background:#ddd;position:absolute;right:0;top:0} </style> </head> <body> <div class="left">200px</div> <div class="middle"></div> <div class="right">300px</div> </body> </html>查看全部
-
脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。而對于使用absolute positioning脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。查看全部
-
文檔流：將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流. 浮動（float）和 絕對定位（position：absolute）-->脫離文檔流 浮動和絕對定位脫離文檔流的區別 相同點：其他盒子都會無視被浮動或絕對定位的盒子； 不同點：盒子的內容會考慮被浮動的盒子，但任然會無視絕對定位的盒子。查看全部
-
兩列布局： 一、清除默認樣式body{margin：0；padding：0} 二、兩列布局： 1、寬度自適應（用的比較少）， 1.1因為寬度要自適應，所以要設置左側left的width:xx%；1.2，需要左右排列，所以設置float:left；1.3另一側right也設置width和float(left和right都可以吧，再微調) 2、固定寬度（☆☆☆☆☆）left和right增加一個父div#main,設置這個main的width，以及margin 0 auto；2.1如果要精確控制left和right的寬度，可以使用px【就是說也可以使用%粗略控制?！? 如下代碼 （這就是自適應寬度的布局，拖動頁面的窗口可以“縮小或放大”頁面的內容 寬度自適應（用的比較少），1.1因為寬度要自適應，） <head> <style type="text/css"> body{margin:0;pading:0} .left{width:20%;height:500px;float:left;background:#ccc} .right{width:80%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> 若果想更確切的控制它的寬度可以將（%）改為像素（px）的形式查看全部
-
兩列布局： 一、清除默認樣式body{margin：0；padding：0} 二、兩列布局： 1、寬度自適應（用的比較少）， 1.1因為寬度要自適應，所以要設置左側left的width:xx%；1.2，需要左右排列，所以設置float:left；1.3另一側right也設置width和float(left和right都可以吧，再微調) 2、固定寬度（☆☆☆☆☆）left和right增加一個父div#main,設置這個main的width，以及margin 0 auto；2.1如果要精確控制left和right的寬度，可以使用px【就是說也可以使用%粗略控制?！? 如下代碼 （這就是自適應寬度的布局，拖動頁面的窗口可以“縮小或放大”頁面的內容 寬度自適應（用的比較少），1.1因為寬度要自適應，） <head> <style type="text/css"> body{margin:0;pading:0} .left{width:20%;height:500px;float:left;background:#ccc} .right{width:80%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> 若果想更確切的控制它的寬度可以將（%）改為像素（px）的形式查看全部
-
main為left和right的父集查看全部
-
2.1一列布局 1.一列布局不適于存放文本，太長容易看串行 一列布局： 1.通常作為網頁頭部。固定寬度。 2.真正開發，高度設置自動的。查看全部
-
如何使用CSS進行網頁布局： 1.1 布局：又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合。 特點：1、網頁可以自適應寬度 2、網頁的長度理論上可以無限延長 分欄又稱分列，常見布局有：一列布局、二列布局、三列布局，但更多的是混合布局查看全部
-
一般而言，子元素position:absolute后，都需要父元素設置position:relative ，父元素的相對定位可以使得子元素跟隨父元素的位置來定義查看全部
-
...查看全部
-
...查看全部
-
浮動后面的元素如果不清除浮動， 就會當前面的元素不存在而占用其位置. 本例中main未設置高度,footer未清除浮動其css效果就會占用main位置 清除浮動方式： clear:both overflow:hidden 在有些情況下只能是用overflow:hidden來清除浮動 [ 收起全文 ]查看全部
舉報
0/150
提交
取消