-
.top{width:100%;height:100px;background:#ccc;} .main{background:#f00;height:500px;} .left{ width:200px;height:500px;position:absolute;left:0;top:100px;background:blue;} .right{background:#9C9;height:500px;margin-left:210px;} .foot{width:100%;height:50px;background:#F63;clear:both;}查看全部
-
这里是一个排版陷阱：当main里面设置了左右两个div之后，这个时候不要忘记给main也设置和左右div一样的高度，题中的main是没有设置高度的，只设置了宽度，这个时候我们可以想象main其实就是一根高度为0的线条浮在top的下面，只是我们看不到，因为它没有高度。而footer是浮在main下面的，并不是浮在左右两个div下面，所以我们看到footer块莫名其妙跑上来盖住了左右两个div，解决办法如下： 第一，给main赋予和左右div同样大小的高度，这个是最直接的方法，main的高度从0变成600px之后，自然把以它为参照、浮在它屁股下面的footer压到下面去了； 第二，把footer的浮动清除掉，使用clear：both，这样footer从一个跟着main浮起来的飞行物变成了失去翅膀的元素，不能浮动，它就只能自动找最长的参照物（也就是很长的左右div），然后折行显示在底部了，一样能达到效果。 如果还不懂，可以将main的高度设置为height：300px，就一目了然了，因为这个时候main变成了300px，而footer会跟着main低300px显示在top下面。我们看不到main，不代表它不存在。查看全部
-
混合布局（其实就是嵌套）查看全部
-
margin:0 auto;是块状元素的居中对齐方式查看全部
-
.left{position:absolute; top:0; left:0;} .right{position:absolute; top:0; right:0;} .main{margin:0 310px 0 210px;}查看全部
-
三列布局（固定） 如需留空隙，则在第九行margin修改两个像素值（如margin:0 310px 0 210px）查看全部
-
三列布局（浏览器自适应）查看全部
-
float:left/right查看全部
-
将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。（自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，自上而下，自左到右的顺序） 脱离文档流：CSS样式必须具有浮动（float）和绝对定位（position：absolute） 脱离文档流也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position：absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。查看全部
-
两列布局（固定居中）查看全部
-
两列布局（浏览器自适应宽高度）查看全部
-
Div{width:800px; height:500px; margin:0 auto}：实现居中对齐，主要参数为margin:0 auto查看全部
-
一列布局不适于存放文本，太长容易看走眼 一列布局： 1.通常作为网页头部。固定宽度。 2.真正开发，高度设置自动的。 两列布局自适应，使用百分比。 三列布局，使用绝对定位和margin。 盒子之间的三种关系：1.相邻；2.嵌套；3.叠加。我们要做的就是摆放好盒子的位置。 关于页面上元素的加载顺序： 元素是从前往后依次加载的，要想先加载就要写在前面。 通常left部分是作为菜单，right部分作为主体内容，我们打开网页，都希望先看到主体内容，所以有意把right部分写在left部分前面，然后把right部分右浮动，left部分左浮动， 这样布局不会出现问题，而且还解决了IE6下右浮动换行的问题。查看全部
-
UI设计师制定CSS规则（例如浮动、定位等）查看全部
-
常见的布局 分栏又称为分列查看全部
举报
0/150
提交
取消