-
.top{width:100%;height:80px;background:#ccc;} .main{margin:0 auto; width:80%; background:red;overflow:hidden;position:relative;} .left{ width:200px; background:blue; position:absolute;top:0;} .right{margin-left:205px;background:green;width:100%;} .foot{width:100%;height:80px;background:orange;}查看全部
-
三列布局（用绝对定位） .left{ position:absolute; top:0; left:0;} .middle{ margin:0 100px 0 200px; } .right{ position:absolute; top:0; right:0;}查看全部
-
浮动（float）和 绝对定位（position：absolute）可以让元素脱离文档流。查看全部
-
三列布局：左右固定宽度，中间自适应宽度 1、设置左右宽度，中间不设置宽度 2、左右使用绝对定位（position：absolute） 3、中间设置“margin：0 300 0 200”（上、右、下、左） 4、中间的空隙可以通过多设置margin值来实现查看全部
-
body{margin:0;padding:0}清除默认样式查看全部
-
margin:0 auto;设置自动居中查看全部
-
1、相对定位（position：relative），不可以脱离文本流 2、浮动（float）和绝对定位（position：absolute），可以脱离文档流查看全部
-
自适应布局 1、自适应宽度：设置百分比 例：width：20% 2、左右浮动：设置浮动（Float） 例：float:left 固定布局 1、为自适应设置父级 2、设置父级样式，控制在父级之内查看全部
-
清除浏览器样式： body{margin:0;padding:0} 设置div水平居中:margin（边界） margin:0 auto “0”代表上下（垂直）居中，“auto”代表左右居中查看全部
-
一列布局：普通，居中即可（左右margin为auto） 二列布局：float：left和float：right即可 三列布局： 1.全部自适应：margin=33.33%，并全部设置为float 2.左右固定，当中自适应：左右position：absolute；当中margin定死(手动写左右margin=左右栏宽)查看全部
-
练习代码，颜色自己随便调了几个查看全部
-
可以设置中间部分自适应布局查看全部
-
float 浮动，就是会浮起来查看全部
-
宽度是自适应，所以就用百分比进行设置，高度可以进行像素设置，因为左右两列，所以可以进行加个左边设置float left 右边可以设置float right。 两列自适应布局：就是窗口进行拖动时候，可以随着窗口进行自适应的变化。 更多的用到的是固定宽度的布局 可以先建立一个父级 给父级一个宽度 然后进行计算另外两个。查看全部
-
由于main块没有设置高度,里面的元素（left块,right块）又被设置成了浮动显示,所以main块没有被撑开,就像一条线一样紧贴在head块的下面,所以footer块会越位跑到head块下面。 因为main包含的块全都设置了浮动，而浮动和绝对定位会使块脱离标准文档流，但是head仍在文档流中 所以foot会忽略main的所有块而贴着head块 方法1： .main{ width:860px;height:600px;margin:0 auto;background:#9FC;} 方法2：.footer{ height:50px; background:#9F9; margin:600px 0 0 0;} 方法3：.footer{width:100%; height:50px; background:#9F9; position:absolute;top:700px;}查看全部
举报
0/150
提交
取消