-
div居中布局： margin：0 auto；查看全部
-
通过运用一列布局与两列或三列布局去进行混合布局查看全部
-
在设置了所有的块元素的浮动后，记得在页脚统一清理浮动clear:both。查看全部
-
布局就是处理：块与块的叠加关系：嵌套、叠加、相邻查看全部
-
三列布局：一般是float或position布局定位。 1.对于特殊情况，如需要两边固定，中间自适应，无法通过浮动来实现效果，因为中间列内容撑开宽度过大，包含块同时放不下了三列，它只好向下移动。此时需要用到定位position，且让中间列宽度自适应两边列。 2.如果要使列之间有隔离，可以通过margin实现。 3.为什么要设置margin：0 200px 0 300px;呢？ 因为三个框都脱离了文档流，不设置上面的话，会被两列覆盖掉左右两边部分。查看全部
-
三列布局： 1.left/middle/right 2.分别给它们设置自适应宽度百分比查看全部
-
一列布局：新浪首页、百度首页 1.给容器设置固定宽度，使用margin: 0 auto;居中。 2.宽度可以设置为固定单位，也可以设置为自适应百分比（相对父容器大小）。查看全部
-
清除浮动， clear:both;查看全部
-
二列布局： 1.自适应宽度：给左右两列设置左右浮动，宽度单位为百分数。 2.一般给父容器固定宽度，两列子元素自适应，或者固定宽度。查看全部
-
1.常见布局分类：一列布局、二列布局、三列布局、混合布局（常用） 2.实现方法：利用浮动float与定位position实现效果图查看全部
-
两列宽度自适应 分别设置left和right模块的宽度百分比即可查看全部
-
常见网页布局 分栏又称为分列，常见的分局分为：一列布局， 二列布局， 三列布局， 混合布局查看全部
-
https://juejin.im/entry/558a0e05e4b0bf8365b258d2?utm_source=imooc&utm_medium=comment&utm_campaign=v771查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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{margin:0 auto;background:gray;height:60px;} .main{margin:0 auto; height:200px;} .left{ width:200px;height:200px;position:absolute;left:0;top:60px;background:blue;} .right{width:auto;height:200px; background:green; margin:0 0 0 210px; } .middle{height:200px;background:red;width:10px;position:absolute; left:200px;top:60px;} .foot{margin:0 auto;background:orange;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> <div class = "middle"></div>. </div> <div class="foot">foot</div> </body> </html>查看全部
-
可以让元素脱离文档流的css设置：绝对定位和浮动查看全部
举报
0/150
提交
取消