CSS定位与布局

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

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

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

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

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

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

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

三、几种布局格式

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 ;
         }

可得样式为：