-
一列布局不适于存放文本，太长容易看走眼
一列布局： 1.通常作为网页头部。固定宽度。 2.真正开发，高度设置自动的。
两列布局自适应，使用百分比。
三列布局，使用绝对定位和margin。
盒子之间的三种关系： 1、相邻 2、嵌套 3、叠加 我们要做的就是摆放好盒子的位置。
查看全部 -
清除浮动
clear:both;
水平居中
margin:0 auto;
查看全部 -
哪两个 css 设置，可以让元素脱离文档流（）
浮点型（float）和绝对定位（position：absolute）
查看全部 -
绝对元素定位的 top 和 left 值跟绝对元素未脱离常规流之前在常规流中位置有关。
查看全部 -
if we want to use self ajusted page, use the percentage
查看全部 -
清除浮动
clear:both;
查看全部 -
特殊案例：左侧200px，右侧300px，中间为自适应宽度 左右两侧为固定定位，中间用margin值来调整，不设置宽度
.left{ width:200px; height:500px; background:#ccc; position:absolute; left:0; top:0; } .middle{ height:500px; background: aquamarine; margin:0 310px 0 210px; } .right{ width:300px; height:500px; background:#ddd; display:inline-block; position:absolute; right:0; top:0; }查看全部 -
混合布局最为常用
查看全部 -
若三部分中有的要求定宽，有的要求自适应，这时候浮动就不能完成三列布局的排列，可以用定位来实现。
左侧用绝对定位定位在左上，右侧绝对定位在右上，中间的就设置边距。
查看全部 -
设定宽度是想设定宽度为自适应，那就要用百分比来设置宽度，。
查看全部 -
完成了，噢噢噢噢
查看全部 -
.main{height:600px;background:black;}
.right{height:600px;position:absolute;left:210px;right:0px;background:red;}
.left{height:600px;width:200px;float:left;background:green;}
查看全部 -
头部logo区，中间信息区域，底部版权区（放一些不重要的东西）
中间的信息区经常会分栏表现，一列布局，二列布局，三列布局，混合布局。
查看全部 -
网页设计特点：网页可以自适应浏览器的宽度
网页的长度理论上是无限的
查看全部 -
.top{height:200px;background:#ccc;}
.main{height:600px;background:red;}
.left{ height:600px;width:300px;background:blue;position:absolute;float:left;}
.right{ height:600px;width:750px;background:green;float:right;}
.foot{height:50px;width:100%;background:#f99;}
查看全部
举报