聖盃佈局和雙飛翼佈局

做用

聖盃佈局和雙飛翼佈局用來解決兩邊固定寬度，中間自適應的三欄佈局。

區別

這兩種佈局首先都要經過設置float:left浮動，和margin-left、margin-right的負值，目的是讓三元素並排顯示，行成三欄佈局。

區別在中間盒子處理的方式。怎麼作才能不把中間盒子的內容覆蓋住，讓其徹底顯示：

• 聖盃佈局 是經過父元素設置padding-left和padding-right爲左右兩邊的盒子留空間。而後左右兩盒子經過相對定位，改變left和right的值，移動後不遮擋中間div。

• 雙飛翼佈局 是直接在中間div內部建立子div，用於放置內容。而且設置子div的margin-left和margin-right,爲左右兩個div留出位置，左右兩個盒子不須要設置position:relative和right,left屬性。

聖盃佈局

首先給出頁面結構

//middle第一個是爲了實如今瀏覽器優先渲染。
<div class="parent">
    <div class="middle all"></div>
    <div class="left all"></div>
    <div class="right all"></div>
</div>
複製代碼

接下來咱們先給三欄各自設置寬高，這裏咱們高度都用200px。由於中間欄寬度要自適應，因此咱們設置爲100%。

.all{
    height: 200px;
}
.middle{
    width: 100%;
    background-color: yellow;
}
.left{
    width:200px;
    background-color: red;
}
.right{
    width:100px;
    background-color: dodgerblue;
}
複製代碼

到這裏，咱們三欄的基本樣式就出來了。此時，三欄並不在一行，那塊級元素怎麼才能一行顯示呢？那就是經過浮動。因此，咱們再加上 float屬性。

.all{
    height: 500px;
    float:left;
}
.middle{
    width: 100%;
    background-color: yellow;
}
.left{
    width:200px;
    background-color: red;
}
.right{
    width:100px;
    background-color: dodgerblue;
}
複製代碼

浮動的特色就是這一行佔滿了就會換行。由於中間欄已經佔滿了一行，因此此時兩側欄是在第二行的。那怎麼才能讓兩個側欄上來呢？這就是負外邊距的做用：

.all{
    height: 200px;
    float: left;
}
.middle{
    width: 100%;
    background-color: yellow;
}
.left{
    margin-left: -100%;
    width:200px;
    background-color: red;
}
.right{
    margin-right: -100px;//100px是自身的寬度
    width:100px;
    background-color: dodgerblue;
}
複製代碼

三欄的基本佈局就已經完成了。可是還有個問題，就是當咱們在 middle中加入內容後，兩邊的內容會被兩側欄擋住。

此時就須要父元素經過設置padding來給左右兩邊的盒子留下空間，這個空間的大小和兩邊的盒子大小同樣：

.parent{
    height: 200px;
    padding: 0 100px 0 200px;
}
.all{
    height: 200px;
    float: left;
}
.middle{
    width: 100%;
    background-color: yellow;
}
.left{
    margin-left: -100%;
    width:200px;
    background-color: red;
}
.right{
    margin-right: -100px;
    width:100px;
    background-color: dodgerblue;
}
複製代碼

可是並無出現咱們想要的結果，反而 parent的 padding將三個元素都擠到右面了，如今就須要爲左右盒子設置position:relative,經過 left和 right移動位置了：

.parent{
    height: 200px;
    padding: 0 100px 0 200px;
}
.all{
    height: 200px;
    float: left;
}
.middle{
    width: 100%;
    background-color: yellow;
}
.left{
    position: relative;
    margin-left: -100%;
    left: -200px;
    width:200px;
    background-color: red;
}
.right{
    position: relative;
    margin-right: -100px;
    right: 0px;
    width:100px;
    background-color: dodgerblue;
}
複製代碼

聖盃佈局就真正的完成了！

總結一下聖盃佈局的實現過程：

1. 父元素包含三個元素，分別設置他們左浮動
2. 中間的盒子寬度設置爲100%，自適應，而且在三個元素的最前面顯示，第一個渲染
3. 左右兩邊使用margin-left、margin-right的負值，使他們與中間的盒子同行，（左邊：-100%，右邊：-右邊盒子的寬度）
4. 中間的盒子width:100%後，須要父元素經過padding設置左右兩邊空白，爲左右兩邊的盒子留盒子同等大小的空間
5. 設置左右兩邊position:relative,經過left和right移動位置

雙飛翼佈局

雙飛翼佈局比較簡單，我就總結一下：

1. 父元素包含三個元素，分別設置他們左浮動
2. 中間的盒子寬度設置爲100%，自適應，而且在三個元素的最前面顯示，第一個渲染
3. 左右兩邊設置margin-left的負值，使他們與中間的盒子同行，（左邊：-100%，右邊：-右邊盒子的寬度）
4. 在中間div內部建立子div，用於放置內容。而且設置子div的margin-left和margin-right,爲左右兩個div留出位置

<div class="parent ">
    <div class="middle">
        <div></div>
    </div>
    <div class="left all"></div>
    <div class="right all"></div>
</div>
複製代碼

.parent{
    height: 200px;
    overflow: hidden;
}
.all{
    height: 200px;
    float: left;
}
.middle{
    float: left;
    width: 100%;

}
.middle > div{
    margin: 0 100px 0 200px;//爲左右兩邊的盒子預留空間
    height: 200px;
    background-color: yellow;
}
.left{
    margin-left: -100%;
    width:200px;
    background-color: red;
}
.right{
    margin-left:-100px;
    width:100px;
    background-color: dodgerblue;
}
複製代碼

學習筆記，實例是自敲。

參考連接：blog.csdn.net/zheng182371…