CSS定位与布局

摘要: 本篇博客，来自本人学习css定位以及布局上的总结。

这篇博客主要介绍几种布局样式

1、用css在页面上对一个对象定位

在css中，从顶部，右侧，底部或左侧用绝对定位（position）可将页面上的一个元素定位；

#box1{
position: absolute;
top: 20px;
left: 20px;
width: 200px;
background-color: #4BAF3F;
border:2px solid red;
display: inline-block;
}

依照上述设置方式，可使元素按照想要的位置显现：

2、当设置浮动属性时如何防止下一个元素上移呢？

是在样式中设置clear属性，此属性可以清除任何浮动元素中的一个元素

3、几种布局格式

1） 一列布局

tips：width和height设置之后就可以利用margin对要操作的div进行位置的设置

#top{width: 100%; height: 100px;background: #ccc;}

#main{height: 600px;width: 960px;margin: 0 auto;background: #FCC;}

#foot{height: 50px;width: 960px;margin: 0 auto;background: #9cf;}

2） 二列布局

左右布局中，以一个大的div包裹两个小块的div，在两个div中，则可以像一列布局那样设置div的样式

#main{width: 960px;height: 600px;margin:0 auto}

#main_left{width: 360px;height: 600px;background: #ccc;float: left;}

#main_right{width: 600px;height: 600px;background: #fcc;float:right;}

3） 三列布局

在三列布局中，即左中右布局中，用到position来进行定位，通过设置相应方位词（top right left等）的属性，即可确定所在div的位置（中间的middle因为没有设置position，故是自适应状态）

#left{width: 200px;height: 600px;background:#ccc;position:absolute; left: 0;top:0;}
#middle{height: 600px;background: #9cf;margin: 0 0 300px 200px} #right{width:200px;height:600px; background:#fcc;position:absolute; right: 0;top:0;}

4） 如何创建一个固定宽度，居中且有两栏的布局

可照如下格式设置（tips：主要是设置position）：

#last{
position: absolute;
top: 100px;
left: 0;
width: 240px;
height: 30px;
background-color:#498AF4 ;
}

可得样式为：