圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局
虽然两者的实现方法略有差异，不过都遵循了以下要点：
1.两侧宽度固定，中间宽度自适应
2.中间部分在DOM结构上优先，以便先行渲染
3.允许三列中的任意一列成为最高列
4.只需要使用一个额外的<div>标签
圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style type="text/css">
.header{
height:50px;
background: #666;
text-align: center;
}
.main{
/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
padding:0 200px 0 180px;
height:100px;
}
.middle{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
.left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
position:relative;
left:-180px;
}
.right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
/*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
position:relative;
right:-200px;
}
.footer{
height:50px;
background: #666;
text-align: center;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="main">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
双飞翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼布局</title>
<style type="text/css">
.header {
height: 100px;
background: bisque;
}
.left {
width: 200px;
height: 300px;
background: coral;
float: left;
margin-left: -100%;
margin-right: -200px;
}
.center {
background: palegreen;
float: left;
width: 100%;
}
.inside{
margin-left: 200px;
margin-right: 180px;
}
.right {
width: 180px;
height: 200px;
background: darkorange;
float: left;
margin-left: -180px;
}
.footer {
height: 200px;
background: salmon;
clear: both;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="main">
<div class="center">
<div class="inside">
中间自适应区域
</div>
</div>
<div class="left">左边固定区域</div>
<div class="right">右边固定区域</div>
</div>
<div class="footer">footer</div>
</body>
</html>
