圣杯布局和双飞翼布局的区别与实现

2019-10-01 本文已影响0人 Nice先生的狂想曲

前言

开门见山，圣杯布局和双飞翼布局都是为了实现两边定宽,中间自适应的布局，只是在实现的方法上有些许不同，因此不要被这两个奇怪叫法的东西迷惑了。事实上，圣杯布局和双飞翼布局在设计思路上也有些相似之处，我将会一步步带领大家认识，并在后面为大家总结。

如果想了解掌握什么是传统模型、flex、grid布局，可以看看上一篇文章：
传统模型、Flex和Grid布局

如果感觉这两个布局理解起来较难，那么你可能是新人，可以看看另外一篇文章：
左右布局（传统模型、flex、grid的实现）

事实上，我们最后实现的布局如下：

圣杯、双飞翼布局

圣杯布局

HTML

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

消除浏览器默认：

            html,body{
                padding: 0;
                margin: 0;
            }

首先，我们先设置三个div的统一高度和float属性；并且设置center的width为100%，left和right的width为100px；

            .contain{
                float: left;
                height: 300px;
            }
            .center{
                 background-color: bisque;
                 width: 100%;
            }
            .left{
                 background-color: rebeccapurple;
                 width: 100px;
            }
            .right{
                background-color: salmon;
                width: 100px;
            }

设置后：

图1-1

接着我们要想办法将 left 先进入到 center 的左边，注意这里说的是“进入”，看图中的文字“center”消失就理解了，这里用margin-left:-100%，-100%是要让 left 的左外边距向左移动父元素的宽的100%，因为 center 的宽度为100%

图1-2

同理，我们将 right 进入到 center 的右边，这里margin-left:-100px，得到

图1-3

到这里会发现基本成型了，但是别忘记 center 还有部分被遮挡，于是将整个父元素的内容层压缩

            main{
                padding: 0 100px;
            }

如下，仔细观察多出来的空白部分

图1-4
接着我们只需要把左右两个 div 移动到两边的位置

            .left{
                 position: relative;
                 left:-100px;
            }
            .right{
                position: relative;
                left:100px;/*也可以right:-100px*/
            }

这样就完成了我们圣杯布局啦~鼓励鼓励！！！
效果图就是开头那个，就不截图了，希望大家到这里能自己实操一下

双飞翼布局

其实双飞翼和圣杯布局前期做的事情都一样，即做到文字图1-3的效果，为了不被说是凑字数，滑动指头回去瞄一眼呗。

由图1-3中基本成型的布局中，我们要思考另外一种方式令 center 不再被遮挡，因此不同于圣杯布局的就是针对 center 自身进行改变，那么就给 center 增加一个子元素

            <div class="center contain">
                <div class="center-child">
                    center-child
                </div>
             </div>

通过对子元素设置左右外边距：margin:0 100px，便能达到想要的结果。

因此，我们知道圣杯布局是在三个 div 并列后调整了父元素的内边距padding属性后移动左右两边的 div 实现的，而双飞翼布局则是在并列后在 center 中添加多一个子元素并对子元素进行外边距margin属性的调整实现的，其目的都只是为了解决中间的 div 层被遮挡的问题，那么下面我们将分别用 flex 和 grid 布局对这种三栏布局进行实现

flex实现

html

        <main>
            <div id="center">center</div>
            <div id="left">left</div>
            <div id="right">right</div>
        </main>

CSS

            main{
                display: flex;  
                height: 300px;
            }
            #center{
                background-color: bisque;
                order: 0;
                flex: 1;
            }
            #left{
                background-color: rebeccapurple;
                order: -1;
                width: 100px;
            }
            #right{
                background-color: salmon;
                order: 1;
                width: 100px;
            }

其中，容器设置display: flex，中间栏需要自适应则flex: 1，另外order属性能定义排列顺序。

grid实现

        main{
            display: grid;
            height: 300px;
            grid-template-columns: 100px auto  100px;
            grid-template-areas: "left center right";
        }
        #center{
            background-color: bisque;
             grid-area: center;
        }
        #left{
            background-color: rebeccapurple;
            grid-area: left;
        }
        #right{
            background-color: salmon;
            grid-area: right;
        }

grid布局相当于在容器设计好整个布局，也就是布局已经固定了，再将项目进行排列。