-
position: absolute 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 fixed 生成絕對定位的元素，相對于瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 relative 生成相對定位的元素，相對于其正常位置進行定位。 因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。 static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 inherit 規定應該從父元素繼承 position 屬性的值。查看全部
-
清除浮動： 1.clear:both 2.width:100%;overflow:hidden. 3.overflow:none查看全部
-
三列自適應布局查看全部
-
<!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{height:200px;width:100%;background:gray;} .main{height:600px;background:red;} .left{width:200px;height:600px;background:blue;position:absolute;left:0;top:200px;} .right{height:600px;background:green;margin:0 220px 0 0;} .foot{height:50px;width:100%;background:orange;clear:both;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html> 自適應百分比 記得清除浮動 先后加載 及兼容性不太理解查看全部
-
浮動（float）和絕對定位（position:absolute）這兩個CSS設置，可以讓元素脫離文檔流查看全部
-
為什么給right設置浮動的話它會有寬度？查看全部
-
這里是一個排版陷阱：當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上右下左查看全部
-
clear:both是用來清除緊鄰后面元素的浮動，如前一個div左浮動了，后面的div就會與其同行，假如你不想兩個div同行顯示，想讓后面的div單獨一行，你就可以用clear:both 而overflow:hidden還需要加上一句width:100%方可實現浮動清除，它一般用于清除父元素和子元素之間的浮動影響。這樣看來，第一個清除浮動方法可看做是兄弟元素之間浮動的清除。查看全部
-
一列布局：網站首頁使用。查看全部
-
<style type="text/css"></style>表示這是樣式表,在中間放入css內容； type是它的類型屬性，text/css是它的值，它們是告訴瀏覽器這里面的文本內容(text)要當層疊樣式表 (css)來解析，不能當作其它的來解析。查看全部
-
自適應百分比 body{margin:0;padding:o;} main{width:800px;margin:0 auto;} .left{height:500px;width:20%;float:left;background-color:red;} .right{height:500px;width:80%;float:right;background-color:blue;}查看全部
舉報
0/150
提交
取消