理解圣杯布局和双飞翼布局

虽然前天才信誓旦旦的说要写文章,结果要写的时候却马上有点偷懒了.习惯养成确实不太容易.

最近几天是打算先精进点CSS后专心学习js.在网上学习的过程中看到大多数人提到圣杯布局和双飞翼布局,作为一个小白,自然肯定好奇的搜索一番了.

什么是圣杯布局和双飞翼布局?

其实他们解决的问题是一样的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染.但是只是后续思路不同而分化成两种布局.

初期解决思路

先给出html文档结构.

为了方便展示,我给各部位设置了高度以及背景色方便区分,
为了让他们并成一列.首先给container里面的元素都加上float:left属性.
因为中间的盒子要自适应,所以设置样式width:100%.这时候打开浏览器可以看到的是中间占满了全部宽度.左,右两个被挤下来排在下面.为了让左,右两个区块上去,左设置margin-left:-100%,右设置margin-left:-150px(这个150px是我自己设置右边区块的宽度).
这时候样式看起来是这样的

            #header,
            #footer {
            width: 100%;
            height: 40px;
            background-color: darkseagreen;
            text-align: center;
        }
        
        #container .column {
            float: left;
        }
        
        #center {
            background-color: red;
            width: 100%;
            height: 200px;
        }
        
        #left {
            background-color: blueviolet;
            width: 200px;
            height: 200px;
            margin-left: -100%;
        }
        
        #right {
            margin-left: -150px;
            height: 200px;
            width: 150px;
            background-color: greenyellow;
        }
        
        #footer {
            clear: both;
        }

这时候浏览器里面的显示效果

可以看到是他们这3个div块并列成一排了.但是问题还没完全解决.因为现在中间的div块是占据100%宽度的,而左右通过设置margin-left属性上来了,等于中间部分的左右区域被覆盖了.需要想办法让中间的往里面缩.这时候圣杯布局跟双飞翼布局的差别就出来了.

---

圣杯布局的解决思路.

先通过父元素padding属性设置内边距,给左右让出空间.
#container {padding: 0 150px 0 200px;}
这时候看起来是这样的

接着利用相对布局.把左右移到正确的位置上

            #left {
            position: relative;
            left: -200px;
            background-color: blueviolet;
            width: 200px;
            height: 200px;
            margin-left: -100%;
        }
        #right {
            position: relative;
            right: -150px;
            margin-left: -150px;
            height: 200px;
            width: 150px;
            background-color: greenyellow;
        }

最终效果

双飞翼布局

双飞翼布局则是是通过新建的div的外边距隔离各列

先增加一个div块

然后把内容放进子元素里面.再用margin或者padding让出空白位置

           #center {
            width: 100%;
        }
        
        #center-inner {
            margin: 0 150px 0 200px;
            height: 200px;
            background-color: red;
        }

随感

这两种布局都存在下面优点:

1. 允许中间重要部分先显示.
2. main部分是自适应宽度的,很容易在定宽布局和流体布局中切换.
3. 任何一栏都可以是最高栏,不会出问题.
4. css要求非常简单.

但是个人认为双飞翼布局更直观一点.而且也十分灵活,写的时候感觉跟Bootstrap的栅格布局有点类似.

参考

In Search of the Holy Grail
CSS布局中圣杯布局与双飞翼布局的实现思路差异在哪里？