css基本布局

一、一列布局

关键代码：

{     

        width：960;

        margin：0 auto；

}

代码：

运行结果：

 

 

分析：以上代码实现一列布局，头部占整个浏览器的100%，中部和底部利用 “定宽+margin" 实现居中。

 

 

 

二、二列布局

关键代码：

.left{  float:left;  }

.right{ float:right;}

代码：

运行结果：

分析： 主要是通过左边的盒子左浮动：float：left 。右边的盒子右浮动：float：right 来实现的。最外面的一个盒子利用”定宽+margin“来是整个页面居中显示。

上面代码左右盒子宽度使用的是百分比，实现自适应，如果需要固定宽度，则将左右盒子的宽度设置为固定像素值。

三、三列布局

关键代码：

.left{float:left; width：33.33%；}

.middle{float:left；width：33.33%；}

.right{float:right；width：33.33%；}

运行结果：

分析：此布局为三列自适应布局，通过使用float和百分比宽度实现：左边盒子和中间盒子float：left；右边盒子：float：right；三个盒子的宽度都为33.33%；

左右边固定中间自适应的三列布局：

关键代码：

.left{  position:absolute; left:0; top:0;}

.middle{margin:0  xxpx 0 xxpx}

.right{position:absolute; top:0; right:0}

运行结果：

分析：如果希望有间隔，可以将中间的盒子改为 .miaddle{margin:0 310px 0 200px;}

四、混合布局

关键代码：

将一列布局，二列布局、三列布局混合使用

 运行结果：

总结自慕课网教程：http://www.imooc.com/learn/57