0. 開始正文之前的自我吐槽
聖盃佈局和雙飛翼佈局一直是前端面試的高頻考點，然而本人對佈局和css這方面實在不擅長==，每次被面試官問到css相關的問題，都含含糊糊；到了後面自己閒麻煩直接說"我不太懂css!"。然而總被強硬的懟回來，“你不會css你還是前端嗎！”。
然而程序員的世界中“懂”的意思不是等於“精通”嗎？=。=
好了正文開始。。
1. 聖盃佈局
1.簡單介紹
聖盃佈局要求：
1. header和footer佔屏幕全部高度，高度固定
2. 中間的contaier部分是一個三欄佈局
3. left和right寬度固定，middle自適應填滿整個區域；高度爲三欄中最大的高度；2. 三種實現
a. 浮動
先給出dom結構
<body>
<header>header</header>
<div class="container">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
</body>header和footer就直接定高，width設爲100%就好;container也設爲100%；left和right定寬；middle寬度100%；讓container下的div都向左浮動。
header,footer{
height:100px;
width:100%;
background-color: antiquewhite;
}
.container{
height:200px;
}
.container>div{
float: left;
}
.left{
width:200px;
height:200px;
background-color: burlywood;
}
.right{
width:300px;
height:200px;
background-color: burlywood;
}
.middle{
width:100%;
height:200px;
background-color: #b0f9c2;
}這時我們的佈局如下：
因爲middle先渲染的且寬度爲百分百，所以left和right被擠到了下面；爲了讓他們都在一行顯示，讓left左外邊距向左偏移整行的寬度；讓right的左外邊距向左偏移right自身的寬度。代碼如下：
.left{
...
margin-left: -100%;
}
.right{
...
margin-left: -300px;
}
這樣看是不是順眼了些？然而middle裏的內容被left覆蓋了。。我們需要給container部分設置左右padding，向中間擠壓，然後將left和right設置成相對定位，將其固定到正確位置。
.container{
...
padding-left:200px;
padding-right:300px;
}
將div.left和div.right設置相對定位。並給container設置高度，其子級div高度爲百分百。
.container>div{
...
height:100%;
position: relative;
}
.left{
...
left:-200px;
}
.right{
...
right:-300px;
}
這種方法是兼容性最好的寫法，然而代碼略顯複雜。
b.flex佈局
dom結構：因爲不用設置浮動了，container的三個子div按順序排布就好。
<body>
<header>header</header>
<div class="container">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
</body>flex佈局非常簡單，只需在container中設置flex即可。
.container{
display: flex;
flex-direction: row;
}c.css grid
dom結構：
<body>
<header>header</header>
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
<footer>footer</footer>
</body>body{
display:grid;
}
header{
grid-row:1;
grid-column:1/5;
background-color: antiquewhite;
}
footer{
grid-row:3;
grid-column:1/5;
background-color: antiquewhite;
}
.left{
grid-row:2;
grid-column:1/2;
background-color: burlywood;
}
.right{
grid-row:2;
grid-column:4/5;
background-color: burlywood;
}
.middle{
grid-row:2;
grid-column:2/4;
background-color: #b0f9c2;
} 
使用grid佈局可以減少容器div；也比較容易理解；在2018年初絕大數瀏覽器已經支持css grid。
2.雙飛翼佈局
雙飛翼佈局和聖盃佈局幾乎一樣，區別在於處理middle中被遮擋的部分。雙飛翼是在middle中再放一個div用來顯示內容，爲其設置margin。
dom結構如下：
<body>
<header>header</header>
<div class="container">
<div class="middle">
<div class="main">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
</body>其他css和上一節第一個方法一樣，區別在於這裏middle中多了一個div main，用多了一個div的方式代替使用相對佈局。
.container{
width:100%;
height:200px;
}
.container>div{
float: left;
height:200px;
}
.left{
width:200px;
background-color: burlywood;
margin-left: -100%;
}
.right{
width:300px;
background-color: burlywood;
margin-left: -300px;
}
.middle{
width:100%;
background-color: #b0f9c2;
}
.main{
margin:0 300px 0 200px;
}