不懂聖盃佈局？5種方式包教包會

前言

本文針對聖盃佈局（兩邊固定，中間自適應佈局）以五種方式進行講解，話很少說，如今開始

方式一：float佈局

利用float實現聖盃佈局是最原始也是兼容性最好的方式，固然相對於其它幾種來講較爲複雜。

首先定義一個容器包裹三列盒子

<div class="container">
    <div class="center">
        center
    </div>
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>
複製代碼

其中有一個須要注意的是盒子的排布順序，其中.center盒子排在最前面，left和right依次排列，這裏主要是用到了float和margin的特性，接下來會講到。

其次是css樣式

.container > div {
    float: left;
    height: 300px;
}
複製代碼

⬆首先將父容器下的子盒子都定義爲float爲左的浮動元素,高度統一爲300px

.left, .right {
    width: 100px;
    background: #f00;
}

.center {
    width: 100%;
    background: #0f0;
}
複製代碼

⬆接下來定義子盒子的寬度，能夠看見.center盒子的寬度爲100%，也就是佔滿父容器，那麼left和right盒子相應的就到下一行了，以下圖所示。

那麼如何讓left和right盒子放置在center盒子的左右側呢，這就要用到margin和float的特性了，先看代碼示例

.left {
    margin-left: -100%;
}

.right {
    margin-left: -100px;
}
複製代碼

能夠看見，首先給left盒子添加了一個負100%的margin-left值，這個百分數對應的是left盒子的父盒子，也就是.container的寬度之比，那麼left盒子就會向左移動父元素的寬度的距離。

其次由於left盒子和center盒子是浮動排列的，left盒子margin爲負，且已經超過自身的寬度，那麼left盒子在文檔流中的佔位寬度已然成了一個負值，因此依據浮動的特性。

當盒子成爲浮動元素後，在浮動層擁有內聯元素的"特性"，當多個浮動元素一排容不下時，就換行。

反之，則不換行。

left盒子就會和center盒子同處一行，且位於container盒子的最左側，同理給right盒子一個負自身寬度的margin值，right盒子就會和center盒子同處一行，且位於右側，如圖所示。

這裏又出現了一個問題，center盒子的內容被left和right盒子覆蓋了，這裏咱們用box-sizing和padding屬性解決這個問題

.center {
    box-sizing: border-box;
    padding: 0 100px;
    width: 100%;
    background: #0f0;
}
複製代碼

在雙飛翼佈局中咱們能夠看見這樣的dom結構

<div class="container"> 
    <div class="main">
        <div class="content">main</div> 
    </div>
    <div class="left">left</div> 
    <div class="right">right</div> 
</div>
複製代碼

其實原理是同樣的，都是限制center盒子的寬度來實現經過padding將center盒子的內容「擠」到中間來展現。

完整代碼能夠看這裏

方式二：絕對佈局

相信不少新人同窗常常使用絕對佈局，以前帶過的徒弟就是這樣，對於一些複雜的佈局，不懂得拆分結構，用絕對定位來實現需求，老是被我敲腦殼。

可是這裏仍是提一下這種佈局，不是說它很差，而是標題的牛逼都吹出去了，總得拿出些「乾貨」來。

先看dom結構，循規蹈矩

<div class="container">
    <div class="left">
        left
    </div>
    <div class="center">
        center
    </div>
    <div class="right">
        right
    </div>
</div>
複製代碼

絕對定位的特性想必你們都知道，因此直接講解步驟。

首先給父容器定義position爲relative，讓absolute的子元素依據這個父元素定位。

.container {
    position: relative;
}
複製代碼

接下來將子元素的定位方式都設置爲absolute，給左右兩邊的盒子設定寬度以及定位的依據

.container > div {
    position: absolute;
    height: 500px;
}

.right, .left {
    width: 100px;
    background: #f00;
}
.left {
    left: 0;
}

.right {
    right: 0;
}
複製代碼

須要理解的就是中間盒子的定位依據了

.center {
    left: 100px;
    right: 100px;
    background: #0f0;
}
複製代碼

設定left和right爲左右盒子的寬度就行，這樣既不會覆蓋左右盒子，也由於沒有定寬，因此就能實現自身的寬度依據父元素的寬度自適應。

完整代碼看這裏

方式三：table佈局

table標籤本是一個自適應的標籤，因此使用table很容易實現這樣的佈局，可是咱們這裏講解的是使用display屬性，而不用table標籤，由於使用table標籤會帶來一些反作用。

先看dom結構, 循規蹈矩的結構

<div class="container">
    <div class="left">
        left
    </div>
    <div class="center">
        center
    </div>
    <div class="right">
        right
    </div>
</div>
複製代碼

再看看css樣式。

首先給父容器container定義display屬性爲table，而且將寬度設爲100%。

.container {
    display: table;
    width: 100%;
}
複製代碼

其次，將父容器下的子標籤display設置爲table-cell，也就是表格的單元格。

想一想看錶格的單元格有什麼特性，對的，若是一個單元格沒有設定寬度值，那麼就會填充剩下的寬度，因此咱們利用這個特性，將左右兩邊的盒子設定一個固定的單寬度值，中間的盒子就自動填充剩下的寬度了，css以下所示：

.container > div {
    display: table-cell;
    height: 500px;
}

.left, .right {
    background: #f00;
    width: 100px;
}

.center {
    background: #0f0;
}
複製代碼

就是這麼簡單，完整代碼看這裏

方式四：flex佈局

用flex方式實現聖盃佈局，只需關鍵的兩行代碼。

dom結構同上

<div class="container">
    <div class="left">
        left
    </div>
    <div class="center">
        center
    </div>
    <div class="right">
        right
    </div>
</div>
複製代碼

首先將父元素display設置爲flex,將子元素設定一個固定的高度

.container {
    display: flex;
}

.container > div {
    height: 500px;
}
複製代碼

其次設定left和right盒子的寬度

.left, .right {
    background: #f00;
    width: 100px;
}
複製代碼

最後將center的flex-gorw設定爲1，flex-grow屬性的做用是，對於父容器剩餘空間的分配，由於只有一個center盒子沒有定義寬度，因此設置爲1,那麼就會自動填滿剩下的空間。

.center {
    flex-grow: 1;
    background: #0f0;
}
複製代碼

完整代碼 看這裏

終極大法：grid佈局

對於grid佈局，我只能用一個字來形容「強強強強強強強強強強~~悍」 由於實現聖盃佈局，只須要兩行代碼。

dom結構同上。

<div class="container">
    <div class="left">
        left
    </div>
    <div class="center">
        center
    </div>
    <div class="right">
        right
    </div>
</div>
複製代碼

CSS以下

.container {
    display: grid;
    grid-template: 500px / 100px 1fr 100px
}、
複製代碼

解釋一下，display: grid; 聲明該盒子是grid佈局。

grid-template: 500px / 100px 1fr 100px 中500px指的是行高，100px 1fr 100px 中的100px表明左右兩列的寬度，中間的1fr表示，中間的盒子也就是center填滿剩下的內容。

至於下面的css，那都是用來修飾的啦。

.left, .right {
    background: #f00;
}
.center {
    background: #0f0;
}
複製代碼

後序

該篇講解方式的順序大體能夠理解成瀏覽器佈局的進化，因此再不學習，你就跟不上啦。

該篇全部的代碼能夠在這裏查看

github.com/Richard-Cho…

碼字不易，點個贊吧，嘻嘻