[转]来自于慕课网学习整理。
网页布局
一、一列布局：
完成代码编辑器中的任务1，要求main和footer在浏览器中水平居中。如下图所示：
Css代码:
body{ margin:0; padding:0; font-size:5px}
div{ text-align:center; font-weight:bold}
.main,.footer{ width:200px; margin:0 auto;}
.head{ width:100%; height:20px; background:#ccc}
.main{ height:100px; background:#FCC}
.footer{ height:20px; background:#9CF}
ps:用到固定宽度居中方法
Html代码：
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
二、二列布局：
完成本次实战练习，快来检验你的实战成果吧！任务最终效果如下：
Css代码:
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:960px; height:600px; margin:0 auto}
.left{ width:300px; height:600px; background:#ccc; float:left}/*左浮动样式*/
.right{ width:660px; height:600px; background:#FCC; float:right}/*右浮动样式*/
HTML代码：
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
三、三列布局：
完成本次实战练习，快来检验你的实战成果吧！最终效果如下图所示：
CSS代码：
body{ margin:0; padding:0; font-size:10px; font-weight:bold}
div{ line-height:15px}
.left{ width:50px; height:100px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:100px; margin:0,80px,0,50px;background:#9CF}
.right{ height:100px; width:80px; position:absolute; top:0; right:0; background:#FCC;}
HTML代码：
<body>
<div class="left">left</div>
<div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。。</div>
<div class="right">right</div>
</body>
四、布局中用到的float属性：
1.float属性：
float:left; float:right; float:none
特点：元素会左移，或右移，直至触碰到容器为止。
当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。
当元素设置浮动属性之后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素。
2.清除浮动的常用方法
方法一：clear:both; clear:left; clear:right
方法二：同事设置width:100%(或固定宽度)+overflow:hidden;
ps:
（1）对于父元素的影响,父元素清除浮动就是：width:100%;overflow:hidden;
父块没有设置指定的高宽，当子块设置为浮动后，原本包裹子块的父块的高度塌陷消失，这时给父块设置overflow:hidden就能清楚浮动造成的影响，使父块重新包裹子块。
（2）对于自己临近的元素影响，清除浮动就是：clear：both;
五、布局中用到的position属性
1.相对定位：position:relative
特点：
（1）相对于自身原有位置进行偏移
（2）仍处于标准文档流中
（3）随即拥有便宜属性和z-index属性
2.绝对定位：position:absolute
特点：
（1）建立了以包含块为基准的定位
（2）完全脱离了标准文档流
（3）随即拥有便宜属性和z-index属性
如果未设置偏移量，
特点：无论是否存在已定位祖先元素，都保持在元素初始位置
脱离了标准本文档流
如果设置偏移量，
偏移参照基准：
无已定位祖先元素，会以<html>（根元素）为便宜参照基准
有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准
六、横向两列布局：
固定宽度列的高度>自适应宽度的列的高度（用绝对定位方式），因为绝对定位不会占据位置，若是固定宽度列高度<自适应宽度的列的高度，无法支撑整个父元素。
1994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
