聖盃佈局 和 雙飛翼佈局

聖盃佈局和雙飛翼佈局的目的：

　　1.三欄佈局，中間一欄最早加載和渲染（內容最重要）

　　2. 兩側內容固定，中間內容隨着寬度自適應

　　3. 通常用於 PC 網頁

聖盃佈局實現思路：

　　1. 將最外層的container的padding 設置爲 padding: 0 150px 0 200px; 爲左右兩塊讓出空間；

　　2. 將.middle，.left ，.right 三者設爲浮動；

　　3. 將middle 的 width設置爲 100%;

　　4. 分別給.left設置margin-left,.right設置margin-right;將left 和right 拉到與middle同一水平；

　　5. 再用定位將左右位置設置好

聖盃佈局具體代碼實現：

　　html代碼：

<div class="container">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

　　css代碼：

   .container{
        padding: 0 150px 0 200px;
        overflow: hidden;
    }
    .middle,.left,.right{
        float: left;
        height: 200px;
    }
    .left{
        position: relative;
        width: 200px;
        margin-left: -100%;
        left:-200px;
        background-color: red;
    }
    .middle{
        width: 100%;
        background-color: blue;
    }
    .right{
        width: 150px;
        margin-right: -150px;
        background-color: yellow;
    }        

 

雙飛翼佈局實現思路：

　　1. 將 .middle,.left,.right 設置爲浮動

　　2. 給 middle 的width 設置爲100%

　　3. 給.middle里加一個.middle-inner ,設置margin-left、margin-right,爲.left 和 .right留出位置；

　　4.分別給.left 設置margin-left ,.right 設置margin-left,將.left和 .right拉到與.middle同一水平；

雙飛翼佈局代碼實現：

　　html 代碼：

    <div class="middle">
        <div class="middle-inner">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>        

css代碼：

   .middle,.left,.right{
        float: left;
        height: 200px;
    }
    .middle{
        width: 100%;
        background-color: blue;
    }
    .middle-inner{
        margin: 0 150px 0 200px;
    }
    .left{
        width: 200px;
        margin-left: -100%;
        background-color: red;
    }
    .right{
        width: 150px;
        margin-left: -150px;
        background-color: yellow;
    }

 

雙飛翼佈局和聖盃佈局實現的相同點：

　　1. 都用了浮動  float:left;

　　2.都利用margin 負值，將兩邊拉到同一水平；

　　3. 將中間寬度width設置爲100%;

雙飛翼佈局和聖盃佈局實現的區別：

　　1.聖盃佈局用最外層container的padding爲左右騰出空間。二雙飛翼佈局是在中間middle里加了一個middle-inner,併爲左右騰出空間；

　　2. 聖盃佈局用到了定位position,二雙飛翼佈局不須要用到；