css三栏布局（圣杯布局和双飞翼布局）学习

三栏布局是经常被使用到的布局，通常中间center部分内容较多，会被优先加载，需要将剩余空间100%填满；两边的left和right固定宽度。

三栏布局常由圣杯布局或者双飞翼布局组成。

首先说一下圣杯布局

<h1>圣杯布局</h1>
    <div class="box">
        <div class="center">content</div>
        <div class="left1"></div>
        <div class="right1"></div>
    </div>

1. 一定要记得将grail大盒子清除浮动，不然会导致父盒子塌陷问题

2. 先写center1盒子（优先加载）

3. center1盒子width：100%；

4. 设置left1 、right1盒子固定宽度（width：200px为例）

5. 三个盒子都设置为浮动且position：relative；

6. 我们此时发现center盒子将left1、right1盒子挤到了第二行

7. 将left盒子设置为margin-right：-100%；

8. 这时发现left盒子回到了第一行但是压在了center盒子上

9. 我们设置大盒子（class="grail"）的padding-left=200px；腾出空间给left1盒子。

10. 然后将left1盒子的left：-200px；将盒子拉到最左边

11. 同样的方法，我们将右盒子的margin-left：-100%；让right1盒子回到第一行

12. 然后通过设置right：-200px；将右盒子拉到最右边相应位置

13. 最后就可以得到圣杯布局如上图。

.box{
        padding-left: 200px;
        padding-right: 200px;
        overflow: hidden;
        zoom: 1;
        align-items: center;
    }
    /* 双伪元素法清除浮动 */
    .box::after,.box::before{
        content: "";
        display: table;
    }
    .box::after{
        clear: both
    }


    .center{
        position: relative;
        background-color: lightgreen;
        width: 100%;
        height: 200px;
        float: left;
    }
    .left1{
        position: relative;
        background-color: lightpink;
        width: 200px;
        height: 200px;
        float: left;
        margin-left: -100%;
        left: -200px;
    }
    .right1{
        position: relative;
        background-color: lightblue;
        width: 200px;
        height: 200px;
        float: right;
        margin-left: -100%;
        right: -200px;
        left: auto;

    }

然后我们看双飞翼布局

圣杯布局利用 box 的 padding 来保留左右位置的，而双飞翼布局利用 content 的 margin 来留位置的。

    <h1>双飞翼布局</h1>
    <div class="box">
        <div class="center2">
            <div class="content">12356</div>
        </div>
        <div class="left2"></div>
        <div class="right2"></div>
    </div>

很明显，双飞翼布局多了一个dom结构层，这会增加渲染压力。但是双飞翼布局比较稳定，圣杯布局在一些极端情况下会发生混乱。

    /* 双伪元素法清除浮动 */
    .box::after,.box::before{
        content: "";
        display: table;
    }
    .box::after{
        clear: both
    }
    
    /* 中间盒子的内容 */
    .content{
        height: 200px;
        margin: 0 200px 0 200px;
    }
    /* 3个主要盒子 */
    .center2{
        position: relative;
        background-color: rgb(98, 238, 98);
        width: 100%;
        float: left;
    }
    .left2{
        position: relative;
        background-color: rgb(248, 89, 113);
        width: 200px;
        height: 200px;
        float: left;
        margin-left: -100%;
        /*使用margin-left的负百分比的时候盒子其实是相对上一个浮动的盒子*/
    }
    .right2{
        position: relative;
        background-color: rgb(7, 179, 236);
        width: 200px;
        height: 200px;
        float: left;
        margin-left: -200px;
        /*移动到最右边*/
    }

效果图展示