当前位置：首页 > article >正文

【H2O2|全栈】CSS案例章节（一）——圣杯布局和双飞翼布局

article 2024/10/28 8:17:09

前言

开篇语

准备工作

异同点

实现

圣杯布局

准备工作

调整操作

最终效果

双飞翼布局

准备工作

调整操作

最终效果

面试参考问答

结束语

前言

开篇语

前两天看到一道面试题，说的是三列布局，用到了圣杯布局和双飞翼布局两种方式，然后问题就是这两种方式的相同点和不同点是什么？

本期将逐步讲解两种不同的布局方式。注意，本系列属于案例章节，主要围绕面试题和一些核心的CSS技巧展开，建议具有一定基础的朋友查阅。

准备工作

软件：【参考版本】Visual Studio Code

插件（扩展包）：Open in browser, Live Preview, Live Server, Tencent Cloud AI Code Assistant, htmltagwrap

浏览器版本：Chrome

系统版本： Win10/11/其他非Windows版本

异同点

两种布局方式的实现效果是一致的，区别在于他们的实现方式。

共同点总结如下——

都是解决左右定宽，中间自适应的三栏布局的问题
三栏均设置左浮动，中间栏宽度设置100%，左右栏设置具体宽度，通过调节使中间栏的内容不被左右两栏遮挡
中间栏的代码放在文档流前面，让浏览器自上而下优先渲染

不同点总结如下——

为了让左右的两栏不遮挡中间栏，圣杯布局和双飞翼布局采用的方式分别如下——

圣杯布局的中间栏使用左右内边距调整内容，为左右栏预留空间
双飞翼布局在中间栏的内部添加了一个盒子，这个盒子使用外边距调整内容的位置

实现

圣杯布局

准备工作

首先，在开始圣杯布局之前，我们先把无关紧要的HTML代码和基本的CSS样式给出来吧。

参考HTML5代码如下——

    <header>顶部</header>
    <main>
        <section id="content">中间</section>
        <section id="left">左边</section>
        <section id="right">右边</section>
    </main>
    <footer>底部</footer>

参考初始CSS代码如下——

        * {
            margin: 0;
            padding: 0;
            text-align: center;
        }

        main {
            overflow: hidden;
        }

        #left,
        #content,
        #right {
            height: 100px;
            float: left;
        }

        #content {
            width: 100%;
            background: #D6D6D6;            
        }

        #left {  
            width: 150px;
            background: #e7e56d;
        }

        #right {
            width: 150px;
            background: #ef8d54;      
        }

        header {
            height: 50px;
            background: #666;
            color: #fff;
        }

        footer {
            height: 50px;
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            background: #666;
            color: #fff;
            clear: both;
        }

得到的效果如下——

调整操作

现在，我们看到中间栏把整个宽度都占满了，所以我们需要给主体部分添加左右内边距，把中间栏压到里面去，空出左右栏的位置——

    main {
            padding-left: 150px;
            padding-right: 150px;
            overflow: hidden;
        }

现在的页面长这样——

现在，由于中间栏占满了整个宽度，而三栏都设置了左浮动，所以左右栏被挤下来了。

但是，不要忘记我们的三栏依旧是左右相邻的。

我们得让左边栏到达中间栏内靠左的位置，圣杯布局提供的办法是用负左外边距。

我们发现，左边栏实质上恰好需要移动100%的中间栏宽度，而中间栏的宽度为100%，所以左外边距为 -100% 。

接下来，我们还需要让这个左边栏离开我们的中间部分，真正地贴合到页面的左侧，圣杯布局提供的方式是使用相对定位。

此时，我们只需要设置 left 为左边栏的自身宽度，就可以让左边栏恰好不遮挡中间的内容了——

    #left {
            background: #e7e56d;
            width: 150px;
            margin-left: -100%;
            position: relative;
            left: -150px;
        }

此时，我们的左边栏的实际占位还在中间栏内，只是视觉上离开中间栏了，这就是不遮挡的效果。

现在的页面长这样——

同理，我们对右边栏的操作是类似的，即先让右边栏利用负左外边距回到上一排，然后用相对定位让自身移动到恰好不遮挡中间的内容——

    #right {
            width: 150px;
            margin-left: -150px;
            position: relative;
            left: 150px;
            background: #ef8d54;            
        }

此时页面的效果如下——

我们为他们修改高度，就可以得到最终的效果了——

        main {
            height: calc(100vh - 100px);
            padding-left: 150px;
            padding-right: 150px;
            overflow: hidden;
        }

        #left,
        #content,
        #right {
            height: 100%;
            float: left;
        }

最终效果

双飞翼布局

准备工作

同样的，我们先给出HTML代码和初始的CSS样式。

参考HTML5代码如下——

    <header>顶部</header>
    <main>
        <section id="content">
            <section class="contain">中间</section>
        </section>
        <section id="left">左边</section>
        <section id="right">右边</section>
    </main>
    <footer>底部</footer>

参考初始CSS代码如下——

        * {
            margin: 0;
            padding: 0;
            text-align: center;
        }

        main {
            overflow: hidden;
        }

        #left,
        #content,
        #right {
            height: 100px;
            float: left;
        }

        #content {
            width: 100%;
            background: #D6D6D6;
        }

        #content .contain {
            background: #6ed8ea;    
        }

        #left {
            width: 150px;
            background: #e7e56d;
        }

        #right {
            width: 150px;
            background: #ef8d54;
        }

        header {
            background: #666;
            height: 50px;
            color: #f1f1f1;
        }

        footer {
            height: 50px;
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            background: #666;
            color: #f1f1f1;
            clear: both;
        }

调整操作

我个人感觉双飞翼布局比圣杯布局要简单多了，因为它只涉及到外边距操作。

首先，我们的中间栏中有一个内容contain盒子，用来装我们真正的中间栏的内容，它的默认宽度应该是100%，高度我们也设置为100%，使之占满整个中间栏——

现在，我们需要为它设置左右外边距，为我们的左右栏预留空间——

        #content .contain {
            height: 100%;
            margin: 0 150px;
            background: #6ed8ea;    
        }

此时我们的页面就会变成这个样子——

还记得我们的三栏实质上是挨在一块的吗？所以左边栏只需要设置负左外边距大小为100%（中间栏大盒子的宽度），右边栏只需要设置负左外边距大小为自身宽度就好了——

        #left {
            width: 150px;
            margin-left: -100%;
            background: #e7e56d;
        }

        #right {
            width: 150px;
            margin-left: -150px;
            background: #ef8d54;
        }

最后我们还是和之前一样调整一下高度——

        main {
            height: calc(100vh - 100px);
            overflow: hidden;
        }

        #left,
        #content,
        #right {
            height: 100%;
            float: left;
        }