-
水平居中：margin:0 auto;查看全部
-
一列布局一般是適用于網站首頁的，如百度首頁。簡單、突出、固定寬度查看全部
-
題目要求先加載右側，如果對left塊使用float則造成right塊先加載后left塊生成直接漂在下一行，故不適用float。clear是配合浮動使用這局也沒它什么事了。只能使用absolute進行大漂移，先對main設置一個relative的好處是相對位置容易找，不設置就對body主體進行漂移，也行。left訂死高度，不然覆蓋foot就沒辦法了。main高度甭管，right作為其子元素設好高度自然就給它充起來了，背景自然露紅。foot直接堆到那就行查看全部
-
這個代碼也可以實現效果： <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{width:100%;background:RGB(204,204,204);height:100px;} .main{background:red;overflow:hidden;position:relative;}/*使left以main為基準絕對定位*/ .left{ width:200px;height:500px;background:blue;position:absolute;left:0;top:0;} .right{height:500px;background:RGB(154,204,153);margin-left:210px;} .foot{width:100%;background:RGB(255,102,52);}/*因為是position實現排版,所以不需要清除浮動*/ </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>查看全部
-
1、定寬布局用浮動就能實現。 2、不定寬的布局用定位實現（像列子這種）。 clear:both;不兼容IE6。先加載哪部分就是在HTML代碼里面把它提到前面查看全部
-
網頁布局：又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合，將理性的思維個性的化的表現出來，是一種具有個人藝術特色的視覺傳達方式。傳達信息的同時有美感。<br> <br> 網頁布局特點：<br> 1、網頁可以自適應寬度<br> 2、網頁的長度理論上可以無限延長<br> 3：頁面為：頭部，主體部分，底部。<br> 分欄又稱為分列：一列布局 二列布局 三列布局 以及混合布局（用的最多）<br> 布局通過 浮動和定位來完成(實現ui界面效果查看全部
-
position：absolute這個是絕對定位； 是相對于瀏覽器的定位。 比如：position：absolute；left:20px;top:80px; 這個容器始終位于距離瀏覽器左20px,距離瀏覽器上80px的這個位置。 position：relative是相對定位，是相對于前面的容器定位的。這個時候不能用top left在定位。應該用margin。 比如：<div class="1"></div><div class="2"></div> 當1固定了位置。1的樣式float:left;width:100px; height:800px; 2的樣式為float:left; position：relative；margin-left:20px;width:50px; 2的位置在1的右邊，距離120px查看全部
-
1、定寬布局用浮動就能實現。 2、不定寬的布局用定位實現（像列子這種）。查看全部
-
<style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:100px; background:#ccc} .main{height:960px;background:red} .left{width:40%;height:960px;background:blue;float:left} .right{width:57%;height:960px;background:green;float:right} .foot{height:50px;background:#f60;} </style> 因為main里面設置了高度height，這樣main就有了實際高度，這樣即使不清除浮動foot也不會往上跑查看全部
-
main里面有兩個部分，left和right。main本身不浮動，但是left，right都浮動了，所以，main感受不到left和right，高度變為0.然后，foot也感受不到left，right存在，所以也會提上去，但是foot的文字部分不會提上去。因為浮動設計初衷就是為了文字環繞效果。再加上前面有個div{text-align:center;?}所以foot只能在最下居中，而foot的背景層提上去在浮動的left和right之下顯示查看全部
-
請看代碼：清除浮動查看全部
-
排版陷阱：當main里面設置了左右兩個div之后，要給main也設置和左右div一樣的高度，題中的main是沒有設置高度的，只設置了寬度，可以想象main其實就是一根高度為0的線條浮在top的下面，只是我們看不到，因為它沒有高度。而footer是浮在main下面的，并不浮在左右兩個div下面，所以看到footer塊莫名其妙跑上來蓋住了左右兩個div，解決：<br> 第一，給main賦予和左右div同樣大小的高度,main的高度從0變成600px之后，自然把以它為參照、浮在它屁股下面的footer壓到下面去了；<br> 第二，把footer的浮動清除掉，使用clear：both，clear：both只是清除左右兩邊的浮動而已。 如果還不懂，可以將main的高度設置為height：300px，就一目了然了，因為這個時候main變成了300px，而footer會跟著main低300px顯示在top下面。我們看不到main，不代表它不存在。<br> 3、overflow：hidden的意思是超出部分不顯示，假如你的div是300*400的，在里面插入一張400*500的圖片，圖片就會跑出那個div里面，超出300*400這個范圍的不顯示。<br> 浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。當在未給footer設置clear屬性時，因為main塊脫離文檔的普通流，footer塊就前進到了head塊的下面；而因為浮動會導致行框被縮短，main塊浮動后，行框縮短，footer塊中的文字就處于mian浮動塊后，這樣footer塊和footer塊中的文本就分離了，所以要設置clear屬性，讓footer塊和footer塊中的文本同時處于mian浮動塊后。 如果不清除浮動，float的元素是脫離了文檔流，那么這個元素原來在文檔流里的位置不會被繼續保留，就會被后來的元素所替代。這個例子中，float的元素的高度要比后來的元素即footer的高度要高，所以footer會被float的元素覆蓋了，如果你把float的元素高度設置的比footer小一點，你就可以看到footer顯出了部分綠色。 那么如果footer的樣式中添加clear的作用是，保留原來float元素在文檔流中的位置，這樣footer元素就不會去替代float元素所在的位置了。查看全部
-
總結： 單列布局用margin: 0 auto; 兩列布局用：float: left & float: right; 三列布局用： position: absolute; top:0; left:0px; right: 0px; margin-left:XXX; 混合布局： clear:both; position: relative; clear:both是用來清除緊鄰后面元素的浮動，如前一個div左浮動了，后面的div就會與其同行，假如你不想兩個div同行顯示，想讓后面的div單獨一行，你就可以用clear:both 而overflow:hidden還需要加上一句width:100%方可實現浮動清除，它一般用于清除父元素和子元素之間的浮動影響。這樣看來，第一個清除浮動方法可看做是兄弟元素之間浮動的清除。 footer之所以會有浮動，是因為main沒有設置height的值 浮動是一種半脫離文檔流的狀態。緊接著“浮動的元素”的第二個元素會給“浮動的元素”騰出位置，以使得兩個元素不會重疊。但是僅僅是第二個元素的文字和圖片會這樣，第二個元素的背景屬性卻會把浮動的元素的背景那部分占據。 overflow:hidden;就不能放在這里用，有些人自身語言沒理解，亂講。overflow 屬性規定當內容溢出元素框時發生的事情。而hidden這個屬性值就是把溢出的內容給隱藏（擦拭/剪切）掉了。查看全部
-
CSS中脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。 需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。 所以 用 clear :both:清除浮動 是footer這個盒子 不會緊跟在 top盒子之后，而是跟在main之后。 若子層設置了浮動，而父層的寬高未設定，則父層實際寬高就是未設定的0值。因為子層是浮動的，所以子層的參數不會被父層接收。這會影響與父層處于同一層次的塊結構受到文本流的影響。 main的高度設定為600px，就是和left一樣高，如果不設置的話，因為left和right都設置為了float，那么元素就會脫離，在沒有顯示的地方比如最左邊和最右邊，那么footer就會顯示補全。。。所以要么清楚浮動要么給main設置高度 footer為什么會變成浮動的——清除浮動 footer不是浮動的，但是他會受到main的影響，之所以別人說清除浮動，clear:both；那是因為清除main對它的影響，因為main是浮動的，它沒有實際的高度.如果不清除浮動對footer的影響，它就會出現在main區域。... footer上面main里有四個div都用到了float，不占文檔層，即浮動在最上面。footer如果不用清除層的話，會自動緊跟top層(此層沒用到float)。故footer要用clear:both ,把浮動層都去掉，自己再另占一行。 clear:both 是用來清除緊鄰后面元素的浮動，如前一個div左浮動了，后面的div就會與其同行，假如你不想兩個div同行顯示，想讓后面的div單獨一行，你就可以用clear:both,可看做是兄弟元素之間浮動的清除。<br> width:100%;overflow:hidden可實現浮動清除，它一般用于清除父元素和子元素之間的浮動影響。查看全部
-
什么是布局查看全部
舉報
0/150
提交
取消