-
body{margin:0padding:0}查看全部
-
左右相对定位，定位在浏览起左上与右上，中间增加margin值，左右外边距为左右两侧div的宽度值，上下外边距为0查看全部
-
body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:80px;background:#EDEDED;} .main{height:600px;width:960px;background:#EEAEEE;margin:0 auto;position:relative;} .left{width:200px;height:600px;background:blue;position:absolute;left:0;top:0;} .right{height:600px;background: #C0FF3E ;margin:0 0 0 210px;} .foot{height:80px;background:#E0FFFF;}查看全部
-
top{ height:100px;background:#9CF} .head,.main{ width:960px; 【任务1】} .head{ height:100px; background:#F90} .left{ width:220px; height:600px; background:#ccc; 【任务2】} .right{ width:740px; height:600px;background:#FCC; float:right} .r_sub_left{ width:540px; height:600px; background:#9C3; float:left} .r_sub_right{ width:200px; height:600px; background:#9FC; 【任务3】} .footer{ height:50px; background:#9F9; 【任务4】}查看全部
-
三列布局： 1. 如果两边固定，中间自适应，则不能使用浮动，而应该使用绝对定位。 2.上述情况中，中间应留出两边宽度的margin值查看全部
-
两列布局： 1. float左、右 2. 自适应（使用百分比） 3. 固定宽度、有父容器、居中查看全部
-
单列布局： .top{颜色、高度} .main{宽、高、居中(margin:0 auto)} .bottom{宽、高、居中} <div class="top"></div> <div class="main"></div> <div class="bottom"></div>查看全部
-
内容主体部分按照需要进行分栏查看全部
-
一般页面有三个部分组成：头部、主体、底部。查看全部
-
clear:both 清楚左右浮动查看全部
-
用绝对定位，固定两边的内容。让当中的自适应。查看全部
-
绝对定位-->position:absolute查看全部
-
1. 因为main中的两个div，left和right都设置了浮动，导致main这个div没有被撑开，缩成了一条线在top这个div下面，根据我的测试，解决办法有两个，第一个是给footer设置清除浮动clear:both。第二种给main这个div设置一个height:600px ，这样与left、right这两个div高度一致，这样就撑开了main这个div，效果也就出来了。 2. 如果不清除浮动，float的元素是脱离了文档流，那么这个元素原来在文档流里的位置不会被继续保留，就会被后来的元素所替代。这个例子中，float的元素的高度要比后来的元素即footer的高度要高，所以footer会被float的元素覆盖了，如果你把float的元素高度设置的比footer小一点，你就可以看到footer显出了部分绿色。 那么如果footer的样式中添加clear的作用是，保留原来float元素在文档流中的位置，这样footer元素就不会去替代float元素所在的位置了。 3. overflow：hidden的意思是超出部分不显示，就是假如你的div是300*400的，但在里面插入一张400*500的图片，图片就会跑出那个div里面，用了这个属性和属性值后，图片超出300*400这个范围的内容不显示出来。而clear：both仅仅只是清除左右两边的浮动而已查看全部
-
三列如果左右固定宽度 中间自适应 如果想在同一行 通过float是不行的 应该左侧{position:absolute;left 0;top 0;} 中间{margin:0 右侧宽度 0 左侧宽度} 右侧｛position:absolute;right 0;top 0｝ 如果中间距离左右列需要一些空间 则将中间的左侧宽度右侧宽度多写点查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position：absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。查看全部
举报
0/150
提交
取消