-
关于三列布局，中间自适应的布局方法 doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0;padding:0px;} .wrap{width:960px; margin:0 auto;} .left{width:200px;height:100px;background:#009;float:left;} .middle{background:#3F3;height:100px;border:1px solid #000;margin:0 300px 0 200px;} .right{width:300px;height:100px;background:#9F0;float:right;} </style> </head> <body> <div class="wrap"> <div class="left">200px</div> <div class="right">300px</div> <div class="middle">自适应宽度</div> </div> </body> 效果是一样的，用float处理，只不过不class=“middle”方在right后。当right又浮动后，脱离文档流。是中间一列在中间显示，在设置margin将盖注部分显示出来，不过div顺序不是很正常，不够标准语义化。查看全部
-
浮动后面的元素如果不清除浮动， 就会当前面的元素不存在而占用其位置. 本例中main未设置高度,footer未清除浮动其css效果就会占用main位置 清除浮动方式： clear:both overflow:hidden 在有些情况下只能是用overflow:hidden来清除浮动查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 浮动和绝对定位脱离文档流的区别 相同点：其他盒子都会无视被浮动或绝对定位的盒子； 不同点：盒子的内容会考虑被浮动的盒子，但仍然会无视绝对定位的盒子。查看全部
-
一列布局： 1，通常作为网站的首页，一般固定宽度； 2，一列布局不适于存放文本，太长容易看串行。 3，真正开发，高度设置自动的，适于自动撑开；查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 浮动和绝对定位脱离文档流的区别 相同点：其他盒子都会无视被浮动或绝对定位的盒子； 不同点：盒子的内容会考虑被浮动的盒子，但仍然会无视绝对定位的盒子。查看全部
-
三列两侧绝对定位、中间自适应查看全部
-
.top{height:100px;background:#ccc;} .main{background:red;height:500px} .left{ background:blue;height:500px;width:200px;position:absolute;left:0;} .right{background:#9c9;height:500px;width:100%;position:absolute;left:210px;} .foot{height:50px;background:#f63;clear:both;}查看全部
-
clear:both 清除浮动查看全部
-
三列布局： 1, margin:上 右 下 左; margin:0 300px 0 200px; 2,左侧固定宽度 中间自适应宽度 右侧固定宽度 使用float不能排成一行；使用定位position:absolute; 例：.left{ width:200px;height:500px;background:#ccc; position:absolute; left:0; top:0; } .middle{ height:500px; background:#999; margin:0 300px 0 200px; } .right{ width:300px; height:500px; background:#000; position:absolute; right:0; top:0;}查看全部
-
清除浮动：clear ： both；查看全部
-
.top{height:100px;background:#ccc;} .main{height:500px;background:red;} .left{ width:200px;height:500px;background:blue;position:absolute;left:0;} .right{height:500px;width:100%;background:#9c9;position:absolute;left:210px;} .foot{height:50px;background:#f63;}查看全部
-
.top{height:100px;background:#ccc;} .main{height:500px;background:red;} .left{ width:200px;height:500px;background:blue;position:absolute;left:0;} .right{height:500px;width:100%;background:#9c9;position:absolute;left:210px;} .foot{height:50px;background:#f63;}查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 浮动和绝对定位脱离文档流的区别 相同点：其他盒子都会无视被浮动或绝对定位的盒子； 不同点：盒子的内容会考虑被浮动的盒子，但仍然会无视绝对定位的盒子。查看全部
-
一个浮动就搞定查看全部
-
style type="text/css"> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ line-height:50px} .left{ width:200px; height:600px; background:#ccc;position:absolute; left:0; top:0} .main{ height:600px;mnargin:o 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0;position:absolute;right:0;toop:0 background:#FCC;}查看全部
举报
0/150
提交
取消