聖盃佈局：（Holy Grail Layout）指的是一種最常見的網站佈局,起源於距離現在十年的2006年，雙飛翼佈局：是由淘寶UED部門提出的，與聖盃佈局的原理相類似，那就是讓左右邊欄寬度固定，中間主要內容容器寬度自適應的佈局方式,與聖盃佈局的區別在於實現方式。
在學習兩種佈局之前我們首先需要對塊狀元素的流體特性有一個理解，什麼是流體特性？
流體特性：塊級元素（如：div）會預設填滿外部的容器，也就是加入我們不對子div的margin-left|right，border-left|right進行規定，不對父元素的padding-left|right進行規定，那麼子元素的寬度會與父元素的寬度相等，假若規定了這些屬性的話，內容區域會隨著margin

兩種佈局所應用的DOM結構：（目錄結構相似，但是與所貼出css具體class名存在不同，完成demo請點選下面地址）

<header></header>
<div class="container">
    <main></main>
    <nav>導航</nav>
    <aside>文章側欄</aside>
</div>
<footer></footer>

聖盃佈局關鍵思路：主要利用nav

/*聖盃佈局css程式碼，與上面DOM結構在class名上存在出入*/
* {
    margin: 0px;
    padding: 0px;
}
.holy-grail {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
header,footer {
    background: #aaa;
    color: #fff;
    font-size: 20px;
    text-align
 
: center;
    line-height: 10vh;
    flex: 1;
}
.grail-body {
    display: flex;
    flex: 1;
    min-height: 80vh;
    text-align: center;
    line-height: 80vh;
    font-size: 20px;
    color: #443939;
}
.body-content {
    flex: 1;
}
.body-nav,.body-aside {
    flex: 0 0 15vw;
}
.body-nav {
    background: rgb(119, 187, 221);
    order: -1;
}
.body-aside {
    background: rgb(255, 102, 51); 
}

雙飛翼佈局關鍵思路：雙飛翼佈局主要利用nav,aside來填充main的margin-left,margin-top,應用main的流體特性

/*雙飛翼佈局css程式碼*/
* {
    margin: 0px;
    padding: 0px;
}
body{
    min-width: 500px;
}
header,footer {
    width: 100%;
    line-height: 10vh;
    height: 10vh;
    font-size: 20px;
    color: #fff;
    text-align: center;
    background: #aaa;
}
.container {
    width: 100%;
    height: 80vh;
}
main, nav, aside {
    height: 80vh;
    float: left;
    text-align: center;
    font-size: 20px;
    color: #443939;
}
main {
    background: orange;
    margin: 0 150px 0 200px;
}
nav {
    width: 200px;
    line-height: 80vh;
    margin-left: -100%;
    background: rgb(119, 187, 221);
}
aside {
    width: 150px;
    line-height: 80vh;
    margin-left: -150px;
    background: rgb(255, 102, 51); 
}