-
1.clear: both 的用處就是清除上方元素“浮動導致高度坍塌”容器高度為0。 因為上面沒給mian設置高度 2. 清楚了 clear: both 是用來清除浮動之后 加入 #footer 上方的元素是設置了 float或者 #footer 上方的元素的子元素設置了 float導致高度坍塌#footer 就會被上方的元素 遮蓋了導致 #footer 顯示不出來 來自他人查看全部
-
上面的代碼沒有給main設置高度，而main里的內容又設置成了浮動，所以footer會跑到head的下面。 解決方法有兩個：1.清除浮動， clear:both; 2.為main設置高度， .main{ width:860px;height:600px;margin:0 auto;background:#9FC; }查看全部
-
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} 左邊和右邊是絕對定位，相對瀏覽器一個left:0,一個right:0. 中間部分采取外邊距,上下距離為零，距離左邊是200px，右邊是300px，如果想留下空隙，增加間隔就行，查看全部
-
position:absolute left:0查看全部
-
文檔流是什么玩意查看全部
-
用到相對定位和絕對定位 可以復習下查看全部
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>編程挑戰1</title> <style> body{margin:0;padding: 0;font-size: 20px;font-weight: bold;text-align: center;} .top{width:100%;background:#999;height: 100px;line-height: 100px;} .main{background:#666;position:relative;} .left{background:#888;width:200px;height:200px;position:absolute;left:0;top:0;line-height: 200px;} .right{background:#ccc;height:200px;margin-left:210px;line-height: 200px;} .foot{width:100%;background:#777;height: 100px;line-height: 100px;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> <div class="foot"> foot </div> </body> </html>查看全部
-
三列布局 且中間只適應 可利用絕對定位兩邊 中間利用margin來調節查看全部
-
清楚浮動的方法綜合一下答案： 一：margin:600px 0 0 0; 二：clear:both(/left/right); 三：給main設置高度：.head,.main{ width:960px; 【height:600px】;margin:0 auto;} overflow在這里會把footer直接刪除，所以不算正確的清除浮動。查看全部
-
margin后面如果只有兩個參數的話，第一個表示top和bottom，第二個表示left和right 因為0 auto，表示上下邊界為0，左右則根據寬度自適應相同值（即居中）查看全部
-
浮動（float）和絕對定位（position；）可以讓元素脫離文檔流（）查看全部
-
有幾個非常不錯的前端開發在線工具，分享給一起學習的小伙伴們，別忘了收藏，很實用。 （1）在線代碼測試工具：http://www.lvyestudy.com/tools/run_code.aspx； （2）在線調色板：http://www.lvyestudy.com/tools/color_picker.aspx； （3）CSS3圓角生成器：http://www.lvyestudy.com/tools/border_radius.aspx查看全部
-
終于自己認真寫一次筆記啦O(∩_∩)O哈哈哈~ 剛才看的是三列布局，除了用浮動式，比如：float：left； 講了一個特殊的例子，就是左右兩邊固定像素，中間是浮動的，在這個例子中， .left{width:200px;height:600px;background:#ccc;position:absolute;left:0;top:0} .main{height:600px;margin:0 310px 0 210px;background:#9cf}<!- -注意margin里的左右順序> .right{height:600px;width:300px;position:absolute;top:0;right:0;background:#fcc;}查看全部
-
<!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:100px;background:#9cf;} .main{width:960px;height:600px;background:red;margin:0 auto;} .left{ width:220px;height:600px;background:#ccc;float:left;} .right{width:730px;height:600px;background:blue;float:right;} .foot{height:50px;background:#9f9;margin:0 auto;} </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>查看全部
-
二列布局用浮動 三列布局絕對定位查看全部
舉報
0/150
提交
取消