在我的理解中，圣杯布局和双飞翼布局的思路是一致的，而且它俩所实现的内容也是一样的，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。虽然两者的方法略有不同，但是也都遵循了以下几个方面：
- 都有头部，底部，中部，而中部又分为中间部，左部和右部。
- 中部里的左部和右部的宽度都是固定的，而中间部的宽度是自适应。
- 中间部的部分在结构上优先，以便先行渲染。
-
允许中部里的三列中的任意一列成为最高列。
那么它俩最主要的不同是什么呢，我为此画了两幅图：
第一个是圣杯布局：
第二个是双飞翼布局：
这个就非常明显的看出了区别，下面是进行详细讲解。
圣杯布局
1.HTML中的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯</title>
<link href="CSS/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top">这是头部</div>
<div class="middle"> /*这是中部*/
<div class="m">这是中间部</div>
<div class="left">这是左部</div>
<div class="right">这是右部</div>
</div>
<div class="bottom">这是底部</div>
</body>
</html>
我们首先要定义出整个布局的HTML的结构，主体部分是由.middle包裹的.m ,.left ,.right三列，其中.m要定义在最前面。
2.css代码
a. 假设我们规定左侧的固定宽度为200px，右侧的固定宽度为300px，首先我们先设置头部和底部，其次我们要在.middle上设置：
.top,.bottom{
text-align: center;
height: 50px;
background-color: aqua;
}
.middle{
padding: 0 300px 0 200px;
height:100px;
margin:0;
}
我们可以得到下面这种效果
实际的例子为
b. 之后我们就要进行中间三列的宽度的设置，同时进行浮动的设置（将中间三列进行左浮动），并且进行高度的设置和定位。
.left,.right,.m{
float: left;
height: 100px;
position: relative;
}
实际的例子为：
c. 我们要在.middle的部分进行 width：100%占满。
代码为：
.m{
background-color: brown;
width:100%;
}
此时效果为：
d.此时我们看到.middle占满了，所以我们现在需要做的就是将.left拉到最左边，我们就要进行margin-left:-100%.
代码为：
.left{
background-color: antiquewhite;
margin-left: -100%;
}
效果为：
e.在这个时候，我们可以看到，虽然我们将.left拉到了左边，但是他将中间部分的内容覆盖掉了，所以我们就要使用相对定位left:-200px
同理我们也要对.right进行绝对定位.right:-300px
代码如下：
.left{
background-color: antiquewhite;
margin-left: -100%;
left: -200px;
width: 200px;
}
.right{
background-color: blueviolet;
margin-left: -300px;
right: -300px;
width:300px;
}
这样，就完成了圣杯布局。
CSS全部代码为：
@charset "UTF-8";
.top,.bottom{
text-align: center;
height: 50px;
background-color: aqua;
}
.middle{
padding: 0 300px 0 200px;
height:100px;
margin:0;
}
.left,.right,.m{
float: left;
height: 100px;
position: relative;
}
.m{
background-color: brown;
width:100%;
}
.left{
background-color: antiquewhite;
margin-left: -100%;
left: -200px;
width: 200px;
}
.right{
background-color: blueviolet;
margin-left: -300px;
right: -300px;
width:300px;
}
效果图为：
PS千万要记住在.middle中进行height:100px；的设置，不然.top和.bottom将会合在一起，从而导致你在写完代码的时候，.middle会将.bottom覆盖掉。导致你的圣杯布局中没有底部，如果在你运行后还是看不见底部，你也可以在最后进行浮动的清除,代码如下：
.bottom{
clear:both;
}
以上就是关于圣杯布局我的一些想法。
双飞翼布局
1.HTML中的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<link href="CSS/CSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top">我是头部</div>
<div class="middle">
<div class="m">我是中间</div>
</div>
<div class="left">我是左部</div>
<div class="right">我是右部</div>
<div class="bottom">我是底部</div>
</body>
</html>
我们首先要定义出整个布局的HTML的结构，主体部分是由.middle包裹的.m和单独的.left ,.right三列。
之后就和圣杯布局差不多了，我就只把代码贴出来，你们可以根据我上面发的它俩的图片自己进行书写，下面就是css的代码了。
@charset "UTF-8";
.top,.bottom{
text-align: center;
height: 50px;
background-color: aqua;
}
.left,.right,.middle{
float: left;
height: 100px;
}
.middle{
width:100%;
height: 100px;
text-align: center;
}
.m{
margin: 0 300px 0 200px;
background-color: brown;
text-align: center;
height: 100px;
}
.left{
background-color: blueviolet;
width:200px;
margin-left: -100%;
text-align: center;
}
.right{
background-color: chartreuse;
width: 300px;
text-align: center;
margin-left: -300px;
}
.bottom{
clear: both;
}
效果为：
