圣杯布局和双飞翼布局都是实现两侧边框固定，中间内容自适应的方法。
首先是圣杯布局，实现方法主要分为这几步
1.头部和底部，分别设置一个高度，宽度默认就是100%。
2.中间 三个div是关键，先创建一个容器container，然后在容器里以center,left,right的顺序，创建三个div,首先将这三个div设置为浮动，这样底部就会跑到上面去，所以我们要将底部清楚浮动{clear:both}
3.给center设置为width:100%，left和right各给一个固定的宽度，由于先创建的center,center会占据整个宽度，所以left,right会挤到下面去。
4.接下来只需要让left和right上来，并位于center两侧就可以了。
5.设置left属性：margin-left:-100%;left会直接跑到center的左部，但是会覆盖住center，这显然不是我们想要的。
6.将container的pading-left设置为left的宽度，padding-right设置 为right的宽度，这样就会为left和right预留出位置。但是同样left因为在container内，它也会跟着container内边距的设置而向右偏移，不会回到理想的左侧。
7.解决这个问题只需要将left设置为position:relative,然后向右移动left的宽度，即可达到目的。
8.right就比较好解决，因为left已经位于center的左侧,此时的right还在center的下面并靠左，所以设置margin-left:'right的宽度'即可，这样right就会被挤上去，并且位于center的右边。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
min-width: 560px;
box-sizing: border-box;
}
.header,.footer{
height: 30px;
/* border: 2px solid #666; */
background-color: brown;
text-align: center;
line-height: 30px;
}
#container{
padding-left: 200px;
padding-right: 150px;
overflow: hidden;
}
.footer{
clear: both;
}
.column{
position: relative;
float: left;
/* border: 2px solid purple; */
height: 400px;
}
#center{
width: 100%;
background-color: burlywood;
}
#left{
width: 200px;
margin-left: -100%;
left: -200px;
background-color: cadetblue;
}
#right{
width: 150px;
margin-left: -150px;
right: -150px;
background-color: coral;
}
</style>
</head>
<body>
<div class="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 class="footer">底部</div>
</body>
</html>
双飞翼布局和圣杯 布局类似，只不过没有 设置container的pading值，而是在任由left和right覆盖住center的左右部分，并在center中在建立一个div，设置其margin值，margin-left=left的宽度，margin-right值等于right宽度即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
min-width: 560px;
box-sizing: border-box;
}
.header,.footer{
height: 30px;
/* border: 2px solid #666; */
background-color: brown;
text-align: center;
line-height: 30px;
}
#container{
padding-left: 200px;
padding-right: 150px;
overflow: hidden;
}
.footer{
clear: both;
}
.column{
position: relative;
float: left;
/* border: 2px solid purple; */
height: 400px;
}
#center{
width: 100%;
background-color: burlywood;
}
#left{
width: 200px;
margin-left: -100%;
left: -200px;
background-color: cadetblue;
}
.main-inner{
margin-left: 200px;
margin-right: 200px;
}
#right{
width: 150px;
margin-left: -150px;
right: -150px;
background-color: coral;
}
</style>
</head>
<body>
<div class="header">头部</div>
<div id="container">
<div id="center" class="column">
<div class="main-inner"></div>
</div>
<div id="left" class="column">左部</div>
<div id="right" class="column">右部</div>
</div>
<div class="footer">底部</div>
</body>
</html>
