圣杯布局与双飞翼布局圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局. 圣杯布局是Kevin Co

圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局.

圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师（传说是玉伯）改进并传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：

1.三列布局，中间宽度自适应，两边定宽；

2.中间栏要在浏览器中优先展示渲染；

3.允许任意列的高度最高；圣杯布局和双飞翼布局要求一样

要点：需要先写内容区，后渲染内容区

圣杯布局

实现要点：

中间内容区域+左、右区域都左浮，使三块数据在同一行；
左、右设置固定宽度，中间内容区设置100%宽；
给left元素设置margin-left:-100%;right元素设置margin-left:-元素宽,让left，right元素和content元素能并排显示
容器设置padding给左右两列预留位置，padding大小分别为左右两列的宽度
给left和right设置position:relative，设置left元素(left-自身宽度)，right元素(right:-自身宽度)

aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMTY1MjEyNy00YWNlNzIzNWU4ZDA0ODQ0LnBuZw.png

<style>
    .box{
        min-height:300px;
        margin:0 auto;
        padding: 0 200px 0 100px;
    }
    header,footer{
        height:50px;
        background: gray;
    }
    .box div{
        height:400px;
        float: left;
        position: relative;
    }
    .clearfix::after{
        content: '.';
        display: block;
        clear: both;
        height:0px;
        font-size:0px;
    }
    .left{
        width:100px;
        margin-left: -100%;
        left:-100px;
    }
    .right{
        width:200px;
        margin-left:-200px;
        right:-200px;
    }
    .content{
        width: 100%;
    }
</style>
<body>
        <header></header>
    <div class="box clearfix">
        <div class="content"  style="background:orange;height:500px;">centent</div>
        <div class="left" style="background: orchid; height:100px;">left</div>
        <div class="right" style="background: pink; height:200px;">right</div>
    </div>
        <footer></footer>
</body>

双飞翼布局

三列布局都左浮动
设置content宽度为100%
给left元素设置margin-left:-100%;right元素设置margin-left:-元素宽,让left，right元素和content元素能并排显示
给content内层嵌套一个div，然后给这个div设置margin值，这样使得，content区域还是占着整个父元素的100%宽度，但是内容区里面的div有设置margin左右，实现居中效果；

aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMTY1MjEyNy05NjUxMTg0YjA2MjdkMjNmLnBuZw.png

上方的粉色区域是content的父盒子，宽度占满，但是子盒子设置了左右margin为左右的宽度

    <style>
        .box{
            border:1px solid red;
            color:#fff;
        }
        .box .left, .right, .content{
            float: left;
            position: relative;
            text-align: center;
            line-height:50px;
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
        .content{
            width:100%;
            height:300px;
            background: pink;
        }
        .content div{
            margin:0 300px 0 200px;
            height:100px;
            background: #000;
        }
        .left{
            width:200px;
            background: purple;
            height:200px;
            margin-left:-100%;
        }
        .right{
            width:300px;
            background: orange;
            margin-left:-300px;
        }
    </style>
<body>
    <div class="box clearfix">
        <div class="content">
            <div>content</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

使用flex实现

实现起来比圣杯或双飞翼更加简单
还是要把内容区写在前面先渲染，后面改几个区域的order更改排列顺序

aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMTY1MjEyNy0wYTIyM2Y1Mzg4Y2RkNWUyLnBuZw.png

    <style>
        .box{
            display: flex;
            border:1px solid red;
        }
        .left{
            width:100px;
            height:100px;
            background: purple;
            order: 1;
        }
        .right{
            width:200px;
            height:200px;
            background: orange;
            order: 3;
        }
        .content{
            flex:1;
            height:50px;
            background: orange;
            order: 2;
        }
    </style>
<body>
    <div class="box ">
        <div class="content" style="background:orange;height:500px;">centent</div>
        <div class="left" style="background: orchid; height:100px;">left</div>
        <div class="right" style="background: pink; height:200px;">right</div>
    </div>
</body>