圣杯布局和双飞翼布局的学习总结

圣杯布局和双飞翼布局的学习总结

最近做响应式网页时遇到了圣杯布局和双飞翼布局这两个概念，它们俩的特点比较相似，都是三个横向排列的块元素，但其具有当调整浏览器窗口时，左右两边的块元素宽度不变，中间的块元素宽度自适应的特点。这两个布局配合flex布局以及bootstrap能达到很好的响应式效果。

以下是对这两个布局的学习笔记：
我们先来说说圣杯布局吧，实现这个布局的原理很简单，步骤如下：

1. 首先写三个div，注意中间的main要先写在前面。div的样式就随便写吧；
2. 给left和right一个具体宽度，中间的main宽度定为100%；
3. 让这三个div向左浮动 (此时的main因为宽度定为100%而独占一行，而left和right浮动在第二行，但它们都有向左靠拢的趋势，现在要做的就是要用定位把left和right挪到第一行左右两侧)；
4. 给left一个负margin(值为-100%，也就是main的宽度)，此时它被挪到了第一行最左边；
5. 也给right一个负margin (值为-apx，其中a为right的宽度)；

此时，三个div都在第一行，实际上main还是独占一行，而left和right是压在main上面的。至此，完成圣杯布局。我们往main中添加满文字看看，发现两侧内容被left和right挡住了。

而双飞翼布局就是在圣杯布局的基础上解决上述问题的一个布局(圣杯布局2.0吗？)
其实…就是在main里面再镶嵌一层内容层，并且使内容层左右margin为a，b(其中a，b分别为left与right的宽度)，这样我们再把刚才的文字放到内容层里，问题就解决了。这就是双飞翼布局。

通过学习这两个布局，使我制作响应式网页又多了一点方法，收获很大。也希望本文章对读者有帮助。