圣杯布局和双飞翼布局

圣杯布局和双飞翼布局是用来解决两边定宽，中间自适应的三栏布局，这种布局的优势在于中间的元素可以优先于两边元素渲染

圣杯模型来源于2006年发在a list part上的这篇文章：In Search of the Holy Grail。这样命名可能是因为老外觉得这玩意太nb了，可以实现三栏布局的一切要求（圣杯在西方神话中就是个据说能实现一切愿望的玩意）。不得不说，老外在某些方面还真是够中二的。圣杯模型的部分参考了下面这篇文章：圣杯布局和双飞翼布局（前端面试必看）

至于双飞翼模型，则来源于淘宝的UED，但是现在的淘宝首页似乎放弃了这种布局方式，不知道是什么原因。

首先，先来写一个带有三栏的盒子（HTML）

<html>
<header>
<link href="./text.css" rel="stylesheet" type="text/css">
</header>
<body>
<header><h4>Header内容区</h4></header>
<div class="container">
    <div class="middle">
            测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息
    </div>
    <div class="left">
    #left
    </div>
    <div class="right">
    #right
    </div>
</div>
<footer><h4>Footer内容区</h4></footer>
</body>
</html>

为了更直观，来为几个块状结构设置样式（CSS）

header{
     100%;
    height: 40px;
    background-color: darkseagreen;
    }

.container{
     height:400px;
     overflow:hidden;
     } 
    
.middle{
     100%;
    height: 200px; 
    background-color: deeppink;
    float:left;
    }

.left{ 
     200px;
    height: 200px;
    background-color: #0000ff;
    float:left;
    }

.right{
     200px;
    height: 200px;
    background-color: #a30bf0;
    float:left;
    }

footer{
     100%;
    height: 30px;
    background-color: darkslategray;
    }

可以看到，此时浏览器的显示是这样的：

可以看到，三个盒子并没有在父元素的一行显示，就是因为中间盒子，也就是第一个盒子我们给它了百分之百的宽度。所以左右两个盒子才会被挤下来。

我们需要利用负边距布局，让左面的盒子上去（令第二个盒子左移第一个盒子的长度）：

.left{margin-left: -100%;}

再让右面的盒子上去（令第三个盒子左移盒子本身的长度）：

.right{margin-left: -200px;}

网页效果是这样的：

可以看到，由于中间盒子是自适应的宽度，所以中间盒子里的内容会被左右盒子给压住一部分。对于这个问题，圣杯布局和双飞翼布局给出了不同的解决方法。

圣杯布局

首先:利用父级元素设置左右内边距的值，把父级的三个子盒子往中间挤。

.container{padding: 0 200px;}

可以看到，左右两边的内边距是有了，但是中间盒子上的内容还是被压着。

此时，要给左右盒子加一个定位，并使用left和right移动盒子

.left{position: relative;
    left: -200px;}
.right{position: relative;
    right: -200px;}

现在，圣杯布局终于搞定了，也实现了我们要的效果，左右侧的盒子固定，中间盒子自适应，而且中间盒子的内容完全不受影响。

双飞翼布局

双飞翼布局解决遮挡的方法就比较简单粗暴了，直接在中间盒子中再创建一个子div用于放置内容

HTML代码：

<html>
<header>
<link href="./text.css" rel="stylesheet" type="text/css">
</header>
<body>
<header><h4>Header内容区</h4></header>
<div class="container">
    <div class="middle">
        <div class="middle-wrap"><!--新创建的div-->
            测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息测试信息
        </div>
    </div>
    <div class="left">
    #left
    </div>
    <div class="right">
    #right
    </div>
</div>
<footer><h4>Footer内容区</h4></footer>
</body>
</html>

可以看到，在中间的盒子中新创建了一个div，此时还需要调整这个子div的margin达到居中显示的效果。

css代码：

.middle-wrap{
    margin: 0 200px;
}

这样，可以避免遮挡的效果

相比圣杯布局，双飞翼不必设置左右栏的position: relative，也不必设置左右left、right值，只需多添加一个子元素包含，相应的padding换成margin。总的说来简单不少。

双飞翼布局的好处：

主要的内容先加载的优化；
兼容目前所有的主流浏览器，包括IE6在内；
实现不同的布局方式，可以通过调整相关CSS属性即可实现。