圣杯布局、双飞翼布局具体实现原理和实现方法

为啥写这篇文章

网上关于这两种布局的文章大多数都只是给了代码实现，而没有说出其中关键性代码的作用和原理。

布局实现的目的

1.三列布局，两端固定宽度(其实可以不用固定宽度），中间栏自适应。
2.中间栏优先渲染。
3.任意栏高度自由不限制。

效果展示

布局实现

一.圣杯布局

1.由于要实现中间栏先渲染，所以需要将center放置前面。

    <div class="content1 box">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

2.将center，left，right设置浮动，并设置宽度。

        .box {
     
            overflow: hidden;
        }
        .box div{
     
            text-align: center;
            font-size: 30px;
        }

        .content1 div {
     
            float: left;
            min-height: 300px;
        }

        .content1 .center {
     
            width: 100%;
            background: #9ab;
        }

        .content1 .left {
     
            width: 300px;
            background: #aaa;
        }

        .content1 .right {
     
            width: 300px;
            background: #ddd;
        }

效果如下。

3.接下来是最为关键的步骤，设置left的margin-left为-100%，right的margin-left为本身宽度的负值。

        .box {
     
            overflow: hidden;
        }
        .box div{
     
            text-align: center;
            font-size: 30px;
        }

        .content1 div {
     
            float: left;
            min-height: 300px;
        }

        .content1 .center {
     
            width: 100%;
            background: #9ab;
        }

        .content1 .left {
     
            width: 300px;
            margin-left: -100%;//关键步骤
            background: #aaa;
        }

        .content1 .right {
     
            width: 300px;
            margin-left: -300px;//关键步骤
            background: #ddd;
        }

效果如下。

首先，left为什么要使用margin-left：-100%，right要使用margin-left: -300px呢？

---

原理：当给margin添加%值时，是根据父元素的宽度来计算的，所以当设置margin-left：-100%后，left刚好被移动到上一行相同位置。而right不需要移动到上一行相同位置，只需要自身在上一行就行，所以只需要设置margin-left为自身的宽度负值后，自动会往上行排。通过动图不难看出来。

其次，看了动图和布局结构，你应该发现了，left和right只是跑到center图层的上一层，遮挡住了center的内容，而不是排挤了center的内容。加过多的字可以看到center内容被遮挡了。

---

4.解决center被遮挡。
方法一

        .box {
     
            overflow: hidden;
        }
        .box div{
     
            text-align: center;
            font-size: 30px;
        }
        
        .content1 div {
     
            float: left;
            min-height: 300px;
        }

        .content1 .center {
     
            width: 100%;
            background: #9ab;
            padding: 0 300px;//神来之笔
            box-sizing: border-box;//神来之笔
        }

        .content1 .left {
     
            width: 300px;
            margin-left: -100%;
            background: #aaa;
        }

        .content1 .right {
     
            width: 300px;
            margin-left: -300px;
            background: #ddd;
        }

效果如下

解释一下为什么要这样子写

box-sizing: border-box;将容器变为怪异盒模型，使得容器实际宽度=内容宽度+边框宽度+填充宽度。那么，当我设置了padding: 0 300px;之后，内容的宽度就刚好是中间的部分了。而两边的填充宽度刚好就是left和right的宽度。

方法二
如果你看了其他人的解释，会发现大多人是使用相对布局的方法，在这儿我不多说。自行百度。

二.双飞翼布局

相对于圣杯布局来说，多加了一个容器。

<div class="content2"> 
　　<div class="main">
    　　<div class="center">center</div> 
    </div>
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>

这种做法看看其他的人怎么做的8 ，我主要讲的时候使用margin-left的作用和原理。