task0001第六部分之三列布局

用兩種不同的方式來實現一個三列布局

用兩種不同的方式來實現一個三列布局，其中左側和右側的部分寬度固定，中間部分寬度隨瀏覽器寬度的變化而自適應變化
兩種方法就是說聖盃佈局，和雙飛翼佈局…..
之前停留在在聽說的階段，一直以爲擺出一個聖盃的樣子的佈局…嗯…好名字…..

聖盃佈局

如果要讓三個div在一個大div中緊挨橫放，那會想到浮動，或者把div的display改成內聯塊狀。
這個佈局就是把左中右都浮動，左邊和右邊的div設定好寬度，中間的寬度設置爲100%。爲了把div撐開，給div都加上高度300px。但是下一個問題就是，中間div這樣設定…寬度鋪滿了整個瀏覽器

所以爲了讓兩邊的div留位置，給三個div的父元素.bd，在這個包裹層裏設定padding左右值分別爲旁邊兩個div的來預留空間

css：
     body{
            margin: 0;
    .bd{
            padding: 0 100px;
       }
        .main {
          float: left;
          height: 300px;
          background-color: crimson;
      }
       .left{
           width: 100px;
            height: 300px;
            float: left;
           background-color: #77BBDD;
       }
        .right{
        float: left;
            width: 100px;
            height: 300px;
            background-color: #E79F6D;
       }

html：      
<div class="bd">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

然後就是想辦法來把這下面的兩個div移動到左右兩邊預留給他們的空白了。
爲了不讓這兩個div脫離文檔流，給左右兩個div都設置相對定位。
左邊的呢需要上移一個瀏覽器寬度也就是左移100%，再左移100px。右邊的呢左邊margin-left設爲負100px的時候，右邊的div已經向上了，但是它覆蓋在了main這個中間的紅色div上，會遮擋它的內容。

要把這個右邊的div再右移100px。也就是left:100px;或者寫
right:-100px;

最後這個代碼可以是這樣

css部分
 <style>
        body{
            margin: 0;
        }

        .bd{
            padding:0 100px;
       }
      .main {
          float: left;
          width: 100%;
          height: 300px;
          background-color: crimson;
      }

       .left{
           width: 100px;
            height: 300px;
          position:relative;
            float: left;
           right: 100px;
          margin-left: -100%;
           background-color: #77BBDD;
       }
        .right{
           width: 100px;
            height: 300px;
           float: left;
           position: relative;
            margin-left: -100px;
            left: 100px;
            background-color: #E79F6D;
       }
    </style>
html部分：
<div class="bd">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

那要是在開始的時候把三個div不用浮動，用內聯塊狀這個屬性是不是也可以實現呢…..
因爲內聯塊狀元素會默認div之間有間距，就像文字一樣，所以在父元素可以設置font-size:0;來消除這個間距。

嗯….每個塊裏面的字體大小也要重新設置了。
嗯，設置完了之後移動一下左邊的塊，藍色黃色兩個塊看起來一起在動，嗯 因爲高度撐不開了,這個並沒有脫離文檔流，所以這個方法…..放棄

那這裏使用浮動，應該是利用了浮動元素負邊距的特性，這樣就能把元素往上一行移動，爲移動元素做鋪墊。

好了，所以這個聖盃佈局就是，三個元素全浮動，中間那個寬度百分百，最外層設padding留出兩邊值，然後再把下面兩個div移動上去….

因爲這個佈局用了相對定位，容易產生一些問題，淘寶的前端對這個做出改進，提出了雙飛翼佈局。

雙飛翼佈局

這個佈局就是在聖盃的基礎上改進。
首先還是一樣三個div都浮動， 然後設定好寬度高度後，要給兩邊div留出空白，中間層寬佔滿瀏覽器了。這次選擇給中間層再加一個div嵌套。

<div class="bd">
    <div class="wrap">
        <div class="main">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

那麼這個浮動就直接加在這個中間層div上了。再給兩邊留空白，給中間div也就是.main設置margin。

  body{
            margin: 0;
        }
        .wrap{
            width: 100%;
            float: left;
        }
      .main {
          margin: 0 100px;
          height: 300px;
          background-color: crimson;
      }

       .left{
           width: 100px;
            height: 300px;
            float: left;
           background-color: #77BBDD;
       }
        .right{
           width: 100px;
            height: 300px;
           float: left;
       background-color: #E79F6D;
       }

然後又是移動下面那兩個塊的問題了。

     .left{
           width: 100px;
            height: 300px;
            margin-left: -100%;
            float: left;
           background-color: #77BBDD; 
       }
       .right{
           width: 100px;
            height: 300px;
           float: left;
           margin-left: -100px;
       background-color: #E79F6D;

這樣就達到了最終效果，但是這樣加了無語義的標籤。
這個佈局就是浮動左右和中間的嵌套層。中間層在嵌套的層裏設置margin，爲其他兩個div留白，由於兩個div初始位置不受padding影響的原因，這樣再移動就只需要margin-left用負邊距了。

如果有錯誤請多多指點,謝謝~