圣杯布局与双飞翼布局的优点：利用布局，可优先渲染主要部分
不同点：
- 圣杯布局：借助的是其他非主要元素覆盖了其父元素的padding值所占据的宽度，同一个杯子，非主要元素其只是占据了全部容器的padding值部分；
- 双飞翼布局：给主要部分main-wrap添加一个外层元素main，其他非主要元素所占据的空间是主要部分(main-wrap)的margin空间，像鸟的两个翅膀，与主要部分main脱离(main和main-wrap是下面双飞翼布局的元素id)。
圣杯布局
有点：不需要添加dom节点
缺点：圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图，当main部分的宽小于left部分时就会发生布局混乱。（main<left即会变形）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper {
padding: 0 100px;
overflow:hidden;
}
.col {
position: relative;
float: left;
}
.main {
width: 100%;
height: 200px;
background:yellow;
}
.left,.right {
width: 100px;
height: 200px;
background:red;
}
.left{
margin-left: -100%;
left: -100px;
}
.right {
margin-left: -100px;
right: -100px;
}
</style>
</head>
<body>
<section class="wrapper">
<section class="col main">main</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
</body>
</html>
双飞翼布局
目的：为了优先显示中间主要部分，浏览器渲染引擎在构建和渲染渲染树是异步的（谁先构建好谁先显示），故在编写时，先构建中间main部分，但由于布局原因，将left置于center左边，故而出现了双飞翼布局。
优点：不会像圣杯布局那样变形
缺点是：多加了一层dom节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {min-width: 550px;}
.col {float: left;}
#main {
width: 100%;
height: 200px;
background-color: #ccc;
}
#main-wrap {
margin: 0 190px;/*这是圣杯和双飞翼最明显的区别，在main内部使用的是margin，而圣杯是直接在container部分使用padding*/
}
#left,#right {
width: 190px;
height: 200px;
background-color: #0000FF;
}
#left{
margin-left: -100%;
}
#right {
margin-left: -190px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="container">
<div id="main" class="col">
<div id="main-wrap"> #main </div>
</div>
<div id="left" class="col">#left</div>
<div id="right" class="col">#right</div>
</div>
</body>
</html>
扩展：定位：像这样的布局，也可以使用定位完成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
header,footer { height: 50px;background:#ccc;}
.wrapper { position: relative;}
.main { height: 200px; margin:0 100px;background:blue;}
.left, .right{ width: 100px; height: 200px; position: absolute; top: 0;background:red;}
.left{ left: 0;}
.right{ right: 0;}
</style>
</head>
<body>
<header>header</header>
<section class="wrapper">
<section class="col main">main</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
<footer>footer</footer>
</body>
</html>
运行结果为：
运行结果1
结果正常，将main更改后结构层正常显示，但是将其left与right的高度改为300px后，结果如下：
运行结果2
出现了异常，故而总结得到定位非主要元素，撑不起整个高度
三个布局方法，有优点也有缺点：
总结图
总结：个人感觉，圣杯布局简单是简单了点，但是有一个致命的缺陷就是main不能比left宽度小，根据自己的业务场景具体使用即可。个人偏向于双飞翼布局。
感谢原作者的总结：https://blog.csdn.net/a18792627168/article/details/80115056
网友评论