【H2O2|全栈】CSS案例章节（一）——圣杯布局和双飞翼布局
目录
前言
开篇语
准备工作
异同点
实现
圣杯布局
准备工作
调整操作
最终效果
双飞翼布局
准备工作
调整操作
最终效果
面试参考问答
结束语
前言
开篇语
前两天看到一道面试题，说的是三列布局，用到了圣杯布局和双飞翼布局两种方式，然后问题就是这两种方式的相同点和不同点是什么？
本期将逐步讲解两种不同的布局方式。注意，本系列属于案例章节，主要围绕面试题和一些核心的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;}最终效果
面试参考问答
Q：讲解什么是圣杯布局和双飞翼布局，分别阐述它们的异同点。
A：
二者的相同点是：
圣杯布局和双飞翼布局都用于实现三栏布局，即两侧宽度固定，中间自适应的效果；
两种布局都需要把中间盒子宽度设置为100%，并写在左侧边栏和右侧边栏前面，以便浏览器自上而下解析时最先渲染。
不同点在于：
圣杯布局是先用左右内边距将中间内容留出，再利用左右侧边栏的负外边距和相对定位使左右两栏到达相应位置；
双飞翼布局是先在中间盒子中在定义一个小盒子，并利用小盒子的左右外边距为侧边栏预留位置，最后直接利用左右侧边栏的负外边距使之分别到达相应位置。
结束语
本期的内容到这里就结束了，主要是基本的界面布局和区域内滚动条两方面的内容，这些在之后的面试中都是非常重要的。
在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
==期待与你在下一期博客中再次相遇==
——浓度骤降的【H2O2】