如何用CSS进行网页布局

什么叫做布局？
又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合

网页设计的特点
网页可以自适应宽度
网页的长度理论可以无限延长

分栏又称分列，常见的布局分为：
一列布局 两列布局 三列布局 混合布局

一列布局

如何使单类居中
margin:0 auto;

#ccc 灰色

两列布局

float:left; float:right;

自适应宽度
width:20%; width:80%;

固定宽度
.main{width:800px;}

浮动和绝对定位，可以让元素脱离文档流

三列布局

.left{position:absolute;left:0;top:0;}
.right{position:absolute;right:0;top:0;}
.middle{margin:0 300px 0 200px;}

混合布局

<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>

页面中的元素就是块与块的关系
块挨着块、块嵌套着块、块叠压着块

清除浮动
clear:both;