認識聖盃佈局和雙飛翼佈局

各類各樣的佈局，無非就是用了浮動 float，負邊距，相對定位，經過這三者的巧妙組合跟拼湊來實現的。用好這些，佈局就會很簡單。

還沒學會佈局時，就聽到有聖盃佈局和雙飛翼佈局，這佈局都有這麼風騷的名字，就以爲很酷，事實也如此，瞭解了聖盃佈局和雙飛翼佈局，才發現挺深奧的。

傳統的佈局中，當咱們須要改變兩欄的互換，就會很麻煩。由於還要涉及到 HTML 代碼的修改，不能徹底從 CSS 上更改，這叫 HTML 和 CSS 的耦合。而聖盃佈局跟雙飛翼佈局就是可以不考慮主體的位置，可以只經過 CSS 代碼就改變相應的佈局，這也是優勢之一。

2、聖盃佈局

試試這樣的 HTML 結構

<div class="header">header</div>
<div class="container">
    <div class="main">main</div>
    <div class="sub">sub</div>
    <div class="extra">extra</div>
</div>
<div class="footer">footer</div>

　　給它加上些 CSS

body{ margin: 0; padding: 0; font-size: 1.5em; font-weight: bold; min-width: 500px;}
    .header,.footer{ text-align: center;}
    .header{ height: 50px; background-color: #76ffff;}
    .footer{ height: 50px; background-color: #ff7676;}
    .main{ background-color: #666;}
    .sub{ background-color: #44fa44;}
    .extra{ background-color: #3dbdff;}
    /*start*/
    .main{
        width: 100%;
        float: left;
    }
    .sub{
        width: 100px;
        float: left;
        margin-left: -100%;
    }
    .extra{
        width: 200px;
        float: left;
        margin-left: -200px;
    }
    .container{
        overflow: hidden;//BFC，撐高高度
    }

結果以下：

會發現，main的位置不正確，因此再給它加上 padding: 0 200px 0 100px;

雖然 main 的位置正確了，但是 sub 和 extra 位置優勢不對，因此咱們再用上相對定位，爲 sub 和 extra 加上以下代碼：

    .sub{
        position: relative;;
        left: -100px;
    }
    .extra{
        position: relative;
        right: -200px;
    }

效果就出來了，

噢耶，這就是聖盃佈局。若是在聖盃佈局的基礎上，給它一個多餘的標籤，把 mian 包起來，這就是雙飛翼佈局。

2、雙飛翼佈局

HTML結構：

        <div class="header">header</div>
        <div class="container">
            <div class="main">
                <div class="main-wrap">main</div>
            </div>
            <div class="sub">sub</div>
            <div class="extra">extra</div>
        </div>
        <div class="footer">footer</div>

CSS結構：

    body{ margin: 0; padding: 0; font-size: 1.5em; font-weight: bold; min-width: 500px;}
    .header,.footer{ text-align: center;}
    .header{ height: 50px; background-color: #76ffff;}
    .footer{ height: 50px; background-color: #ff7676;}
    .main{ background-color: #666;}
    .sub{ background-color: #44fa44;}
    .extra{ background-color: #3dbdff;}
    /*start*/
    .main{
        width: 100%;
        height: 100px;
        float: left;
    }
    .sub{
        width: 100px;
        height: 100px;
        float: left;
        margin-left: -100%;
    }
    .extra{
        width: 200px;
        height: 100px;
        float: left;
        margin-left: -200px;
    }
    .main-wrap{
        margin: 0 200px 0 100px;
    }
    .container{
        height: 100px;
        overflow: hidden;
        *zoom: 1;
    }

能夠看到，只要爲包住 main-wrap 設置 margin，連相對定位都沒用到，效果就出來了。

若是把三欄佈局比做一隻大鳥，能夠把main當作是鳥的身體，sub和extra則是鳥的翅膀。這個佈局的實現思路是，先把最重要的身體部分放好，而後再將翅膀移動到適當的地方。所以請允許我給這個佈局實現取名爲雙飛翼佈局（Flying Swing Layout）.
就如上圖中的鳥有各類姿式同樣，利用雙飛翼佈局，咱們也能夠實現各類佈局。這裏有個嘗試頁面，利用雙飛翼，實現了一套柵格化佈局系統。

 

優勢：

• 實現了內容與佈局的分離，這是漸進式加強佈局的思想，從內容出發，不考慮佈局。
• main部分是自適應寬度的，很容易在定寬佈局和流體佈局中切換。
• 任何一欄均可以是最高欄，不會出問題。
• 須要的hack很是少（就一個針對ie6的清除浮動hack:_zoom: 1;）
• 在瀏覽器上的兼容性很是好，IE5.5以上都支持。

缺點：

• main須要一個額外的包裹層。