-
https://www.zhihu.com/question/24529373/answer/29135021查看全部
-
body{ }查看全部
-
margin 是边缘的意思。查看全部
-
三列布局的 .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;} margin不为0注意加单位查看全部
-
三列布局，两边用绝对定位，中间一列自适应。查看全部
-
position（定位）查看全部
-
<!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{background:#ccc;height:100px;} .main{background:red;width:100vw;position:relative;} .left{ background:blue;width:200px;position:absolute;top:0;} .right{background:#9acc99;margin-left:210px;} .foot{background:orange;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</div> <div class="left">左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</div> </div> <div class="foot">footfoot</div> </body> </html>查看全部
-
clear:both; //清楚浮动 总结： 单列布局用margin: 0 auto; 两列布局用：float: left & float: right; 三列布局用： position: absolute; top:0; left:0px; right: 0px; margin-left:XXX; 混合布局： clear:both; position: relative;查看全部
-
三列布局：不能使用float； 左右两列绝对定位，分别靠左和靠右，中间列为相对定位，左右margin分别设置为左右两列的宽度即可，如果列与列之间需要间隔，则增加相应的margin值。查看全部
-
right 浮动的话会自己形成一个跟内容同样大的框，如果要跟父框一样要设置宽度为20%，不定位默认与父框100%查看全部
-
absolute 固定在左上角，left top 都为0，top不写会被挤下去，父框设为固定的relative，可以相对父框，自适应的不要设置宽度，用浮动，增加一些margin查看全部
-
一列布局通常作为网页的首页，简单明了，主题突出，适合放置简单的内容查看全部
-
footer上面main里有四个div都用到了float，不占文档层，即浮动在最上面。footer如果不用清除层的话，会自动紧跟top层(此层没用到float)。故footer要用clear:both ,把浮动层都去掉，自己再另占一行。查看全部
-
混合布局查看全部
-
清除浮动： 1.clear:both 2.width:100%;overflow:hidden. 3.overflow:none查看全部
举报
0/150
提交
取消