这是我参与「4月日新计划更文活动」的第11天。
我们今天讲一下圣杯布局和双飞翼布局的使用和区别。
首先，
前端圣杯布局和双飞翼布局都是三栏布局，它们的主要区别在于实现方式和解决问题的不同。
前端圣杯布局使用了负边距和相对定位的技巧，可以解决中间主体内容先加载的问题，但是容易造成代码复杂难以维护的问题。并且可以更好地处理左右两栏高度不一致的情况。
而双飞翼布局则是使用了浮动和margin负值的技巧，可以解决中间主体内容先加载的问题，并且代码相对简单易于维护，但是会增加一个额外的div标签，并且需要添加额外的clearfix样式来清除浮动。
从定义上理解了这两者的差异跟区别，现在就让我们从代码上来看下这两个的区别吧。
不多说，上代码。
圣杯布局
下面是圣杯布局的效果。
下面是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>圣杯布局</title>
</head>
<style>
.container {
position: relative;
padding-left: 200px;
padding-right: 200px;
height: 300px;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #ccc;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100%;
background-color: #ccc;
}
.main {
width: 100%;
height: 100%;
background-color: #eee;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
其中left和right两个栏目使用了绝对定位的方式，通过负边距来实现覆盖在主体内容上方的效果。主体内容使用相对定位的方式，并设置了左右padding来避免被左右两栏遮挡。
双飞翼布局
下面是双飞翼布局的效果。
下面是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>双飞翼布局</title>
</head>
<style>
body {
position: relative;
}
.left {
position: absolute;
left: 0;
width: 100px;
height: 500px;
background-color: red;
}
.right {
position: absolute;
right: 0;
width: 100px;
height: 500px;
background-color: blue;
}
.center {
position: absolute;
left: 100px;
width: calc(100% - 200px);
height: 500px;
background-color: yellow;
}
</style>
<body>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</body>
</html>
这里在主体内容上巧妙的使用了calc的属性，达到了动态缩放宽度的效果。
以上就是我今天学习圣杯布局和双飞翼布局的总结。
看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。
