1. 前言

圣杯布局和双飞翼布局是各类网站经常使用的布局，本文将通过两种布局的 示例图、布局过程、以及 完整代码 进行讲解，如果你想进行练习，可以到我的 github地址上获取已去除了关键代码的版本，只留下最初始的元素和颜色样式，供你对自己进行强化的练习；同时，你也可以在这里获取到 完整代码。

2. 圣杯布局

2.1 示例图

拥有 header 和 footer，中间是主内容行
left 和 right 分别固定了宽度，center 会随着整体布局宽度的变化而进行伸缩

常见的类似圣杯布局如 CSDN 文章页：

2.2 设计过程

以下讲解中，会分别使用如 center、left、right 等叫法来描述某一个色块
此讲解需要了解 margin 为负值 时会产生的效果，如果不了解的话请务必先看这篇文章 margin为负值会发生什么？
可以结合如下 2.3 完整代码 进行理解，里面的 注释序号对应该设计过程的序号

1）初始样式

2）把中间部分留出左右元素的宽度

3）margin-right 能让 right 元素被其自身右方的空白元素覆盖上去，相当于自身宽度被消除，从而能浮动到 center 上去

4）left 向左移动 center 的宽度，来移动到 center 所在的行

问：为何设置 margin-left: 100% 就能让 left 顶到 center 的最左边？

答：由于 center 内边距的存在，现在 left 的真实位置可以理解为如下图，因此向左偏移 center 的宽度，就让能 left 到达 center 的最左边

5）left 再向左移动自身宽度，露出被覆盖的 center

问：为何需要设置 position: relative？

答：因为 relative 设置，并且设置了 right: 200px 后，元素只会 自身进行移动，不会影响到其他元素。

2.3 完整代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>圣杯布局</title><style type="text/css">body {min-width: 550px;}#header {background-color: #999999;}#middle{/* 2.把中间部分留出左右元素的宽度 */padding-left: 200px;padding-right: 150px;}#middle .column{float: left;height: 200px;}#left{width: 200px;background-color: #FFFF00;/* 4. 向左移动center的宽度 */margin-left: -100%;/* 5. 再向左移动自身宽度，露出被覆盖的center块 */position: relative;right: 200px;}#center{width: 100%;background-color: pink;}#right{/* 3.margin-right让右方元素覆盖自身，达到消除自身宽度的目的，浮动到center上面去 */margin-right: -150px;width: 150px;background-color: #CCCCCC;}#footer {background-color: #999999;}.clearfix:after{display: table;content: '';clear: both;}</style></head><body><div id="header">header</div><div id="middle" class="clearfix"><div id="center" class="column">center</div><div id="left" class="column">left</div><div id="right" class="column">right</div></div><div id="footer">footer</div></body>
</html>

3. 双飞翼布局

3.1 示例图

left 和 right 固定宽度
中间 main 会随着整体布局宽度的变化而伸缩

3.2 设计过程

1）整体设置浮动

2）将 main 左右内边距留出 left 和right 的宽度

3）left 向左偏移 main 的宽度

4）right 向左偏移自身宽度

3.3 完整代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>双飞翼布局</title><style type="text/css">body {min-width: 550px;}.col {/* 1.设置浮动 */float: left;}#main {width: 100%;height: 200px;background-color: #FFC0CB;}#main-wrap {/* 2.将 main 左右内边距留出 left 和 right 的宽度 */margin: 0 200px 0 150px;}#left {width: 150px;height: 200px;background-color: #FFFF00;/* 3.left 向左偏移 main 的宽度 */margin-left: -100%;}#right {width: 200px;height: 200px;background-color: #cccccc;/* 4.right 向左偏移自身宽度 */margin-left: -200px;}</style>
</head>
<body><div id="main" class="col"><div id="main-wrap">main</div></div><div id="left" class="col">left</div><div id="right" class="col">right</div>
</body>
</html>

4. 技术点总结

	双飞翼	圣杯
主内容两边的边距	用 margin-left 和 margin-right	用 padding-left 和 padding-right
左右元素的偏移	均使用 margin-left 左：向左偏移main的宽度；右：向左偏移自身宽度	左：使用 margin-left（向左偏移main的宽度）右：margin-right（取消自身宽度）

【CSS】圣杯布局和双飞翼布局（包括完整代码）相关推荐

前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
css圣杯布局与双飞翼布局_CSS布局研讨会已于2018年更新
css圣杯布局与双飞翼布局 Yesterday I made live fourteen brand new videos, plus a bunch of updates to existing m ...
[css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现
[css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现一: section{height: 100%; overflow: hidden;clear:both; } .left{ height: ...
css和css的圣杯布局,CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局
前言我曾一度觉得总写css的前端很low,有了这种思想以后我便远离网页布局,H5的工作更不想接,沉迷于页面逻辑和封装组件.直到最近我面试,面试官说我css3理解的不熟,我起初很不屑,但后来静下来反省 ...
css - 圣杯布局和双飞翼布局
参考: Flex 布局教程:语法篇 Flex布局那些年,奇妙的圣杯与双飞翼,还有负边距 CSS布局中圣杯布局与双飞翼布局的实现思路差异在哪里? CSS布局奇淫巧计之-强大的负边距聊聊为什么淘宝要提 ...
CSS经典布局--圣杯布局和双飞翼布局
圣杯布局与双飞翼布局,都是属于三列布局的经典布局. 双飞翼布局是圣杯布局的优化版,由淘宝UED提出: 它们的效果图类似,但是实现方法不同. 文章目录一.圣杯布局和双飞翼布局的常规方法 1.圣杯 po ...
css(8)圣杯布局、双飞翼布局、两栏布局
现在已经很少用到浮动了,一般用flex就可以很好的解决了.但是面试还是考,所以还是写一下三栏布局的关键点是要答出浮动和margin-left为负值圣杯布局圣杯布局和双飞翼布局都是前端工程师需要日 ...
大厂面试必考题：三行布局之圣杯布局和双飞翼布局的区别
前言今天给大家分享一个圣杯布局和双飞翼布局及他们之间的区别,这两个三行布局一直是一些大厂前端面试的高频考点,带你走进大厂面试题,活不多说,冲冲冲~ 布局效果这两个种三行布局效果是一样的,实现的效果 ...
圣杯布局和双飞翼布局详解
圣杯布局刚学圣杯双飞翼布局,有点蒙,特写下来加深印象首先要明确圣杯布局和双飞翼布局要解决的问题是什么? 要解决的就是让浏览器先加载最总要的那部分给客户看,我们做前端开发的时候要切合实际场景开发 ...

【CSS】圣杯布局和双飞翼布局（包括完整代码）