-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 浮动和绝对定位脱离文档流的区别 相同点：其他盒子都会无视被浮动或绝对定位的盒子； 不同点：盒子的内容会考虑被浮动的盒子，但仍然会无视绝对定位的盒子。查看全部
-
混合布局： 将一列布局改造就变成了混合布局。 主体部分加上子div 要点回顾： 其实在网页制作当中，页面中的元素就是块与块之间的关系： 块挨着块；块嵌套着块；块叠压着块 通过css将这些块摆放正确，网页布局就自然完美了。 1、margin:0 auto 自动居中 2、两种分成三栏的方式： 1）两边position：absolute，left：0 top：0 right：0 中间margin｛0 右边 0 左边｝ 2）先分两栏 左右float 再分两栏左右float ※：自适应布局不能使用float查看全部
-
两列的则用float实现，三列以上float失效，需要运用到absolute，中间部分再使用margin调试。 position：absolute；是绝对定位， left：0；是左边的div距离左边有0距离， 题目要求：main水平居中在浏览器中央，并且与左右div有10px的间距 210px=左部分的宽度200px+10px间距 .left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} 310=右部分的宽度300px+10px间距 .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} 如果左外边距小于200px，右外边距小于300px，main和左右两边就没有间距了，甚至main中的部分内容会被遮盖掉，当然，左大于200px,右大于300px,可以看到效果的。但是也不要把数值设太大。 左侧绝对定位：position：absolute;left:0;top:0; 右侧绝对定位：position：absolute;right:0;top:0; 中间宽度定义auto，定位：margin值：margin:0 10px 0 10px; 上右下左查看全部
-
1.三列布局 代码如下 <head> <style type="text/css"> body{margin:0;padding:0} .left{width:33.33%;height:500px;float:left;background:#ccc} .middle{width:33.33%;height:500px;float:left;background:#999} .right{width:33.33%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </body> </html> 2.特殊的三列布局 左右列固定宽度，中间列自适应。 左侧绝对定位：position：absolute;left:0;top:0; 右侧绝对定位：position：absolute;right:0;top:0; 中间宽度定义去掉，定义为auto，加上左右的margin值，margin:0 310px 0 210px; 上右下左（中间空一点出的话，增加margin属性值便可以实现） 左右两侧布局固定宽度，中间部分宽度自适应。则需要采用绝对定位来实现，把左右设置为绝对定位 如下代码 body{margin:0;padding:0} .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:#ddd;position:absolute;right:0;top:0} </style> </head> <body> <div class="left">200px</div> <div class="middle"></div> <div class="right">300px</div> </body> </html>查看全部
-
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 浮动和绝对定位脱离文档流的区别 相同点：其他盒子都会无视被浮动或绝对定位的盒子； 不同点：盒子的内容会考虑被浮动的盒子，但任然会无视绝对定位的盒子。查看全部
-
两列布局： 一、清除默认样式body{margin：0；padding：0} 二、两列布局： 1、宽度自适应（用的比较少）， 1.1因为宽度要自适应，所以要设置左侧left的width:xx%；1.2，需要左右排列，所以设置float:left；1.3另一侧right也设置width和float(left和right都可以吧，再微调) 2、固定宽度（☆☆☆☆☆）left和right增加一个父div#main,设置这个main的width，以及margin 0 auto；2.1如果要精确控制left和right的宽度，可以使用px【就是说也可以使用%粗略控制。】 如下代码 （这就是自适应宽度的布局，拖动页面的窗口可以“缩小或放大”页面的内容 宽度自适应（用的比较少），1.1因为宽度要自适应，） <head> <style type="text/css"> body{margin:0;pading:0} .left{width:20%;height:500px;float:left;background:#ccc} .right{width:80%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> 若果想更确切的控制它的宽度可以将（%）改为像素（px）的形式查看全部
-
两列布局： 一、清除默认样式body{margin：0；padding：0} 二、两列布局： 1、宽度自适应（用的比较少）， 1.1因为宽度要自适应，所以要设置左侧left的width:xx%；1.2，需要左右排列，所以设置float:left；1.3另一侧right也设置width和float(left和right都可以吧，再微调) 2、固定宽度（☆☆☆☆☆）left和right增加一个父div#main,设置这个main的width，以及margin 0 auto；2.1如果要精确控制left和right的宽度，可以使用px【就是说也可以使用%粗略控制。】 如下代码 （这就是自适应宽度的布局，拖动页面的窗口可以“缩小或放大”页面的内容 宽度自适应（用的比较少），1.1因为宽度要自适应，） <head> <style type="text/css"> body{margin:0;pading:0} .left{width:20%;height:500px;float:left;background:#ccc} .right{width:80%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> 若果想更确切的控制它的宽度可以将（%）改为像素（px）的形式查看全部
-
main为left和right的父集查看全部
-
2.1一列布局 1.一列布局不适于存放文本，太长容易看串行 一列布局： 1.通常作为网页头部。固定宽度。 2.真正开发，高度设置自动的。查看全部
-
如何使用CSS进行网页布局： 1.1 布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。 特点：1、网页可以自适应宽度 2、网页的长度理论上可以无限延长 分栏又称分列，常见布局有：一列布局、二列布局、三列布局，但更多的是混合布局查看全部
-
一般而言，子元素position:absolute后，都需要父元素设置position:relative ，父元素的相对定位可以使得子元素跟随父元素的位置来定义查看全部
-
...查看全部
-
...查看全部
-
浮动后面的元素如果不清除浮动， 就会当前面的元素不存在而占用其位置. 本例中main未设置高度,footer未清除浮动其css效果就会占用main位置 清除浮动方式： clear:both overflow:hidden 在有些情况下只能是用overflow:hidden来清除浮动 [ 收起全文 ]查看全部
举报
0/150
提交
取消