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

可得樣式爲：