在最近的面试中碰到这种面试题分享出来第一:供大家参考，第二:加深印象。

圣杯和双飞翼布局介绍

圣杯布局

我们先看HTML结构三栏布局就需要三个div

   <div class="bd">
        <div class="title">圣杯布局</div>
        <div class="main">
            <p>我是main</p>
            <p>我是main</p>
            <p>我是main</p>
        </div>
        <div class="left">
            我是left
        </div>
        <div class="right">
            我是right
        </div>
    </div>

给main添加width: 100%使其占满屏幕，达到自适应的效果。

接着给每个方块都加上float: left

想要三个盒子放到一行，那就需要使用负margin

left要到左边就需要 margin-left: -100%
right要到右边就需要负right的宽度我的right盒子宽度是200px所以margin-left: -200px;

看样子我们好像是那么回事，但是左边的两个盒子挡道了main中的内容，这样子我们就需要中间把两边的位置空出来

那就可以提出一个知识点了！

之前的布局内容圣杯布局和双飞翼布局都相同，只有接下来的操作就是他们的不同所在。 我们一步步来，先把圣杯布局实现这里我们使用padding属性

第一步我们为三个盒子的父盒子添加padding属性

    /* 值为左边盒子的宽度 */
        padding-left: 100px;
    /* 值为右边盒子的宽度 */
        padding-right: 200px;

2. 第二步由于腾开位置后会产生空白，所以使用position: relative;属性来移动左右两栏

这样圣杯布局就是完成了，这里我们可以引出圣杯布局的缺点：如果页面无线放大或者页面小于最小宽度，这时就会破坏布局，所以最好给body设置min-width就是left-width * 2 + right-width至于为什么，简单的说就是： “由于设置了相对定位，所以当left原来的位置和right的位置产生重叠时，由于浮动的原因一行放不下就会换行” 。所以布局就被打乱了。使用双飞翼布局就可以避免这个问题。

双飞翼布局

首先对页面结构修改一下，在中间盒子main中再添加一个内容层content

 <div class="bd">
        <div class="title">双飞翼布局</div>
        <div class="main">
            <div class="content">
                <p>我是main</p>
                <p>我是main</p>
                <p>我是main</p>
            </div>
        </div>
        <div class="left">
            我是left
        </div>
        <div class="right">
            我是right
        </div>
    </div>

这样我们就不需要给left right这两个盒子添加定位属性，可以直接为content添加margin-left和margin-right左右的值

搞定！哈哈哈

接下来总结一下两个布局的优缺点：

圣杯布局：

1.优点：不需要添加dom节点。

2.缺点：正常情况下没问题，如果页面无线放大或者页面小于最小宽度，这时就会破坏布局。css代码较多

双飞翼布局：

1.优点：不会像圣杯布局一样变形，css代码较少

2.缺点：需要添加dom节点。

最后希望这篇文章能给你们有所帮助，哪里有不足可以在评论中提出，我有看到会及时修改，人生就是不断学习的过程，希望大家面试顺利！

参考

juejin.cn/post/684490…

juejin.cn/post/703252…

轻松搞懂面试中的两种经典布局（圣杯布局、双飞翼布局）

圣杯和双飞翼布局介绍

圣杯布局

双飞翼布局

参考