三種方式實現聖盃佈局

聖盃佈局的三種實現

聖盃佈局是一種很常見的css佈局。他要求：

• 上部和下部各自佔領屏幕全部寬度。
• 上下部之間的部分是一個三欄佈局。
• 三欄佈局兩側寬度不變，中間部分自動填充整個區域。
• 中間部分的高度是三欄中最高的區域的高度。

本文會用三種方法來實現聖盃佈局，分別是浮動，flexbox以及css grid。

浮動實現

實現原理

• 外層框架

<div class="header">這裏是頭部</div>
<div class="container"></div>
<div class="footer">這裏是底部</div>

.header,.footer{
    height:200px;
    width:100%;
    background:red;
}
.container{
    padding-left:200px;
    padding-right:300px;
}

• 填充三欄

這一步驟，首先給底部區域清除浮動，防止跟隨上邊的區域一塊兒浮動。
另外：把中，左，右三個區域設置成度浮動。給左右兩塊區域固定的寬度，中間部分的寬度設置成100%。

這樣實現下來，由於浮動的關係，[middle]會佔據[container]的全部部分，而左右兩塊區域都會被擠到下面，可是，因爲第一步設置了內邊距的關係，[container]的左右各剩餘了一塊區域，且寬度與左右區域相同。

<div class="header">這裏是頭部</div>
<div class="container">
    <div class="middle">中間部分</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>
<div class="footer">這裏是底部</div>


.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
}
.right{
    width:300px;
    background:aqua;
}

• 移動左側區域

接下來要作的就是把左右兩塊區域挪到空出來的內邊距空間裏去。

先移動左邊，新加一個樣式 margin-left:-100%。這樣一來，由於浮動關係，就把左邊塊上移到了[middle]左側，與其交織在一塊兒，而右側欄就自動往左移動。而後再給左側欄一個偏移量，偏移量剛好是其寬度，這一步要給[container]的position設成relative

<div class="header">這裏是頭部</div>
<div class="container">
    <div class="middle">中間部分</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>
<div class="footer">這裏是底部</div>


.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    postion:relative;
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
    margin-left:-100%;
    right:200px;
}
.right{
    width:300px;
    background:aqua;
}

• 移動右邊

同上一步的原理同樣，把右側區域也給弄上去，設置負外邊距和自己寬度相同就好了。

<div class="header">這裏是頭部</div>
<div class="container">
    <div class="middle">中間部分</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>
<div class="footer">這裏是底部</div>


.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    postion:relative;
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
    margin-left:-100%;
    right:200px;
}
.right{
    width:300px;
    background:aqua;
    margin-right:-300px;
}

特別完美~

flexbox彈性盒子實現

彈性盒子用來實現聖盃佈局特別簡單。只須要把中間的部分用flex佈局便可。

<div class="header">這裏是頭部</div>
<div class="container">
    <div class="left">左邊</div>
    <div class="middle">中間部分</div>
    <div class="right">右邊</div>
</div>
<div class="footer">這裏是底部</div>


.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.container{
    display: flex;
}
.middle{
    flex: 1;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
}
.right{
    background: aqua;
    width:300px;
}

很簡單，在寫html的時候，由於再也不涉及到浮動，只須要按照左中右的順序來寫就能夠了。左右兩塊區域的寬度寫死，把中間的區域的flex屬性設置成1就能夠了。

css grid網格

grid是一種新的佈局方式，截止2018年初，絕大多數瀏覽器都已經支持css grid。
其原理就是把頁面的區域劃分紅一個一個的網格，就和圍棋的棋盤同樣。

用網格來解決聖盃問題，能夠擺脫彈性盒子時須要格外加一個[container]的問題，也就是左中右三款區域不須要在他們外邊包裝一個額外的div。

先看一下代碼：

<div id="header">header</div>
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>     
<div id="footer">footer</footer></div>
   


body{
    display: grid;
}
#header{
    background: red;
    grid-row:1;
    grid-column:1/5;
}
    
#left{
    grid-row:2;
    grid-column:1/2;
    background: orange;
}
#right{
    grid-row:2;
    grid-column:4/5;
    background: cadetblue;
}
#middle{
    grid-row:2;
    grid-column:2/4;
    background: rebeccapurple
}
#footer{
    background: gold;
    grid-row:3;
    grid-column:1/5;
}

簡單說一下代碼的實現。回頭會專門看一下css grid的細節。

首先給最外層的body設成display:grid。固然，是外層父級元素便可，不必定是body。

grid-row就是說由上到下，#header佔據第1格，#left,#middle,#right佔據第2格，#footer佔據第3格。

而grid-column表示，在橫向從左向右，分紅了五格。其中#header和#footer佔據所有。#left佔據第1格，#middle佔據第2到第4格，#right佔據第5格。

無論是實現起來仍是理解起來都很方便。
關於css grid，下次繼續總結。

小結

總的來講，我認爲使用彈性盒子佈局實現聖盃模式是最方便最快速且不用擔憂移動端的適配問題。而css grid網格，並非全部瀏覽器都支持，因此，暫時不太建議大規模使用。至於，第一種方法，面試的時候準備準備仍是頗有好處的。