關於css佈局

Box:是網頁佈局的對象和基本單位。box分爲以下三類：

- block-level  塊級
- inline-level 行級
- run-in css3中才有

BFC：塊級格式化上下文。

BFC佈局規則:

1.內部的Box會在垂直方向，一個接一個的放置。

2.Box垂直方向的距離有margin決定。屬於同一個BFC的兩個相鄰box的margin值會發生重疊。如：

    網頁中有2個div；
    #div1{
        width:100px;
        height:100px;
        margin:20px;
    }
    #div2{
        width:100px;
        height:100px;
        margin:20px;
    }
    就設置的margin屬性來看，這兩個div上下應該距離40px，可是，顯示的倒是上下距離20px。

3.每一個元素的margin box的左邊，與包含border box的左邊相接觸（對於從左到右的格式化，不然相反），即便存在浮動。

4.BFC的區域不會與float box重疊。

5.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。

6.計算BFC的高度時，浮動元素也參與計算。

聖盃佈局：

下面是標準的3列的佈局模式代碼，左邊列的寬度是200px，右邊列的寬度是150px ，中間的寬度是100%。

        <div id="container">
            <div id="center" class="column">
              　　   center
             </div>      
            <div id="left" class="column">
             　　   left
            </div>
            <div id="right" class="column">
              　　  right
            </div>
        </div>

        css中代碼：
        #container {
      　　   padding-left: 200px;
        　　 padding-right: 150px;
        }
      　　  .column {
       　　  float: left;
        }
        #center {
      　　   width: 100%;
        }
        #left {
        width: 200px;
     　　    margin-left: -100%;
      　　   right: 200px;
        }
        #right {
       　　  width: 150px;
       　　  margin-right: -150px;
        }
        #footer {
        　　 clear: both;
        }