-
水平居中：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
提交
取消