main
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 完整代码
center
left
right
3. 双飞翼布局
3.1 示例图
left 和 right 固定宽度中间 main 会随着整体布局宽度的变化而伸缩
3.2 设计过程
1）整体设置浮动
2）将 main 左右内边距留出 left 和right 的宽度
3）left 向左偏移 main 的宽度
4）right 向左偏移自身宽度
3.3 完整代码
main
left
right
4. 技术点总结
双飞翼圣杯主内容两边的边距用 margin-left 和 margin-right用 padding-left 和 padding-right左右元素的偏移均使用 margin-left左：向左偏移main的宽度；右：向左偏移自身宽度左：使用 margin-left（向左偏移main的宽度） 右：margin-right（取消自身宽度）