圣杯布局&&双飞翼布局

圣杯布局：（Holy Grail Layout）指的是一种最常见的网站布局,起源于距离现在十年的2006年，双飞翼布局：是由淘宝UED部门提出的，与圣杯布局的原理相类似，那就是让左右边栏宽度固定，中间主要内容容器宽度自适应的布局方式,与圣杯布局的区别在于实现方式。
在学习两种布局之前我们首先需要对块状元素的流体特性有一个理解，什么是流体特性？
流体特性：块级元素（如：div）会默认填满外部的容器，也就是加入我们不对子div的margin-left|right，border-left|right进行规定，不对父元素的padding-left|right进行规定，那么子元素的宽度会与父元素的宽度相等，假若规定了这些属性的话，内容区域会随着margin，padding，border的出现会自动填满剩余空间。

两种布局所应用的DOM结构：（目录结构相似，但是与所贴出css具体class名存在不同，完成demo请点击下面地址）

<header></header>
<div class="container">
    <main></main>
    <nav>导航</nav>
    <aside>文章侧栏</aside>
</div>
<footer></footer>

圣杯布局关键思路：主要利用nav,aside来填充外容器.container的padding-left与padding-right,利用了外容器的流体特性

/*圣杯布局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); 
}

圣杯布局完整demo
双飞翼布局demo