美文网首页网页前端后台技巧(CSS+HTML)
圣杯布局和双飞翼布局的区别与实现

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

作者: Nice先生的狂想曲 | 来源:发表于2019-10-01 23:49 被阅读0次

    前言

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

    如果想了解掌握什么是传统模型、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布局相当于在容器设计好整个布局,也就是布局已经固定了,再将项目进行排列。

    相关文章

      网友评论

        本文标题:圣杯布局和双飞翼布局的区别与实现

        本文链接:https://www.haomeiwen.com/subject/mbdlpctx.html