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

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

初期解决思路

先给出html文档结构.

    <div id="header"></div>
    <div id="container">
        <div id="center" class="column"></div>
        <div id="left" class="column"></div>
        <div id="right" class="column"></div>
    </div>
    <div id="footer"></div>

为了方便展示,我给各部位设置了高度以及背景色方便区分,
为了让他们并成一列.首先给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块

<div id="center" class="column">
            <div id="center-inner"></div>
        </div>

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

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