圣杯与双飞翼布局的实现与特点

圣杯和双飞翼布局是一种非常常用的网页布局，目前许多流行的互联网站点都在使用，圣杯布局最早是老外开发出来的一套布局，他可以用现有的CSS技术来实现，而且在各大主流浏览器之间相互兼容，而双飞翼布局是淘宝UED团队在圣杯布局的基础上改良的，主要的思路都是一样的。那我们先来聊一聊什么事圣杯布局，以及他实现的效果是什么样子的。先上图。

圣杯布局

乍一看还是很简单的，但是他有三个很重要的点
1，中间main的宽度可以自适应，随浏览器窗口宽度而改变
2，main模块要放在文档流的前面，因为浏览器解析html是一行一行解析的，这样可以保证页面主题内容先被加载，代码如下图所示
3，使用现有的技术实现，并在各大主流浏览器之间相互兼容

main放在文档流的前面

我们现在来看看他是怎么实现的，我们今天实现的这个是经典的三栏布局，当然两栏，四栏，五六七八栏都是可以实现的，今天我们只讲最经典的三栏，了解之后，想做几栏就做几栏。

    .header{
        width: 100%;
        height: 100px;
        background-color: aquamarine;
    }
    .footer{
        width: 100%;
        height: 100px;
        background-color: #d2e5ff;
    }
    .container{
        width: 70%;
        margin: 0 auto;
        height: 600px;
        background-color: #d2d2d2;
    }
    .main{
        width: 100%;
        height: 600px;
        background-color: brown;
        margin: 0 auto;
        float: left;
    }
    .left{
        width: 15%;
        height: 600px;
        background-color: cornflowerblue;
        float: left;
        /*margin-left: -100%;*/
        /*position: relative;*/
        /*left: -15%;*/
    }
    .right{
        width: 15%;
        height: 600px;
        background-color: darkgoldenrod;
        float: left;
        /*margin-left: -15%;*/
        /*position: relative;*/
        /*right: -15%;*/
    }

<header class="header">
header
</header>

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

<footer class="footer">
footer
</footer>

注意，上面的代码有注释部分，我们一步一步来

这时候实现的效果是这样的

Paste_Image.png

这时，由于main的宽度为100%，所以把right和left挤到下一行去了，现在我们利用负边距让right和left回到中间部分，所以我们解除部分注释

    .left{
        width: 15%;
        height: 600px;
        background-color: cornflowerblue;
        float: left;
        margin-left: -100%;
        /*position: relative;*/
        /*left: -15%;*/
    }
    .right{
        width: 15%;
        height: 600px;
        background-color: darkgoldenrod;
        float: left;
        margin-left: -15%;
        /*position: relative;*/
        /*right: -15%;*/
    }

这时候实现的效果是这样的

效果

现在我们发现main的两侧被挡住了

所以，我们用相对定位将right和left放到合适的位置上去，再解除相对注释即可，就能实现本文一开头那张图片的效果，这就是圣杯布局

双飞翼布局

由于圣杯布局将right和left设置成了相对定位，这样如果我们以后想使用绝对定位的时候就很不方便扩展，而双飞翼布局解决了这个问题，双飞翼在left和right模块中又加了一个元素，然后使用margin来改变新加元素的位置，这个就避免了圣杯布局的定位问题，这个代码也比较简单，直接上了

    .header{
        width: 100%;
        height: 100px;
        background-color: aquamarine;
    }

    .footer{
        width: 100%;
        height: 100px;
        background-color: #d2e5ff;
    }
    .container{
        width: 70%;
        margin: 0 auto;
        height: 600px;
        background-color: #d2d2d2;
    }
    .main{
        width: 100%;
        height: 600px;
        background-color: brown;
        margin: 0 auto;
        float: left;
    }
    .left{
        width: 15%;
        height: 600px;
        float: left;
        margin-left: -100%;
    }
    .right{
        width: 15%;
        height: 600px;
        float: left;
        margin-left: -15%;
    }
    .left-inner{
        width: 100%;
        height: 100%;
        background-color: blue;
        margin-left: -100%;
    }
    .right-inner{
        width: 100%;
        height: 100%;
        background-color: yellow;
        margin-left: 100%;
    }

<header class="header">
header
</header>

<div class="container">
    <div class="main">main</div>
    <div class="left">
        <div class="left-inner">left</div>
    </div>
    <div class="right">
        <div class="right-inner">right</div>
    </div>
</div>

<footer class="footer">
footer
</footer>

上面的双飞翼代码不做详细解释了，其实现在的好多流行框架都已经内置好了这种布局，基本不需要自己再去写了，但了解他对于我们的学习和理解各大前段框架的原理还是很有好处的。

结束，不足还请指教