圣杯布局和双飞翼布局

两个布局的异同

首先我们先来看一下两个布局实现的页面效果

相同点

相同点是两者的表现形式（视觉效果）上都是三栏布局，左右两栏宽度固定，中间部分自适应，也就是常说的固比固布局，需要注意的点如下:

• 中间的盒子优先渲染（要放在前面），宽度100%，两边的盒子宽度固定不变。
• 页面的宽度不能小于中间container的盒子宽度，所以body需要一个min-width最小宽度。

不同点

不同点在于是通过什么原理（思想）去实现的，或者具体通过什么方式。

两个布局具体的实现方式

圣杯布局

圣杯布局的出现是来自于a list part上的一篇文章In Search of the Holy Grail

圣杯布局的特点

• 两边的盒子固定宽度 { width: 200px }。
• 中间的盒子宽度自适应 { width: 100% }。
• 右侧盒子的 margin-left 负值是px单位，百分比单位实现不了。
• 左侧盒子的margin-left 负值是百分比单位（实际的距离是中间盒子的宽度）。

页面结构

<div class="header">
    <span> header内容区域 </span>
</div>
<div class="container">
    <div class="middle">
        中间弹性盒子区域  
    </div>
    <div class="left"> 左边栏 </div>
    <div class="right"> 右边栏 </div>
</div>
<div class="footer"> footer内容区域 </div>

页面样式

body {
    margin:0;
    padding:0;
    text-align:center;
    /* 保证页面宽度不能小于1000px */
    min-width:1000px;
}
/* 圣杯布局  start */
.header {
    width:100%;
    height:50px;
    background-color:skyblue;
}
.container {
    height:200px;
    margin:0 200px;  /* 这个也可以*/
    /* padding:0 200px; */
}
.middle {
    width:100%;
    height:200px;
    background-color:red;
    float:left;
}
.left {
    width:200px;
    height:200px;
    background-color:gray;
    margin-left:-100%;
    float:left;
    position:relative;
    left:-200px;
}
.right {
    width:200px;
    height:200px;
    background-color:gray;
    margin-left:-200px;
    float:left;
    position:relative;
    right:-200px;
}
.footer {
    width:100%;
    height:50px;
    background-color:yellowgreen;
}
/* 圣杯布局  end */

圣杯布局中，两侧的盒子使用float和position属性配合，实现了三栏固比固的布局，还使用了margin-left负值来实现盒子的偏移，这样就能让两个盒子浮动在middle中间盒子上面，从而让中间盒子中的内容正常显示出来。

双飞翼布局

双飞翼布局则是源于淘宝的UED,( 据说是玉伯大大提出来的)，灵感来自于页面渲染。

双飞翼布局的特点

• 页面结构和圣杯布局相同，但是在中间盒子内部加了一个盒子。
• 通过内部盒子的margin属性，将两侧盒子遮挡的位置空出来。
• 右侧盒子的margin-left负值是px单位，百分比单位实现不了。
• 左侧盒子的margin-left负值是百分比单位（实际的距离是中间盒子的宽度）。

页面结构

<div class="header">
    <span>header内容区域</span>
</div>
<div class="container">
    <div class="middle">
        <div class="middle-one">
            中间弹性盒子区域   
        </div>
    </div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>
<div class="footer">footer内容区域</div>

页面样式

body {
    margin:0;
    padding:0;
    min-width:1000px;
    text-align:center;
}
.header {
    width:100%;
    height:50px;
    background-color: skyblue;
}
.container {
    width:100%;
    height:200px;
}
.middle {
    width:100%;
    height:200px;
    background-color: red;
    float:left;
}
.middle-one {
    margin: 0 200px;
}
.left {
    width:200px;
    height:200px;
    background-color: green;
    float:left;
    margin-left:-100%;
}
.right {
    width:200px;
    height:200px;
    background-color: green;
    float:left;
    margin-left:-200px;
}
.footer {
    width:100%;
    height:50px;
    background-color: yellow;
}

通过上面的代码实现过程，不难发现双飞翼和圣杯布局的实现，最本质的区别是中间盒子有一个内部盒子，有没有使用position属性配合float和margin-left负值，用来实现中间内容的正常显示。