作用
首先要解释一下：无论是圣杯布局还是双飞翼布局，都是为了实现一个成果：左右固定宽度，两头局部自适应。两者的区别在于，圣杯布局给两头的 div 设置 padding-left 和 padding-right；而双飞翼布局则在两头的 div 外部创立子 div 搁置内容，并在该 div 里用 margin-left 和 margin-right 留出左右宽度
圣杯布局
HTML 构造如此：
<code class="html"><body>
<header>组成头部</header>
<section class="container">
<div class="middle">两头局部自适应</div>
<div class="left">右边栏固定宽度</div>
<div class="right">左边栏不顾宽度</div>
</section>
<footer>组成尾部</footer>
</body>
CSS 款式如此：
<code class="css"> body {
min-width: 700px;
}
header,
footer {
background: grey;
border: 1px solid #333;
text-align: center;
}
.left,
.middle,
.right {
position: relative;
float: left;
min-height: 130px;
}
.container {
padding: 0 220px 0 200px;
overflow: hidden;
}
.middle {
width: 100%;
background: red;
}
.left {
margin-left: -100%;
left: -200px;
width: 200px;
background: green;
}
.right {
margin-left: -220px;
right: -220px;
width: 220px;
background: blue
}
footer {
clear: both;
}
成果如此：
代码阐明：
- 首先在容器 container 中给予
padding：0 220px 0 200px，这一步是为了给两边固定宽预留地位 - 两头（middle）元素设置
width: 100%，它天然就自适应了 -
设置右边（left）元素
position: relative, left: -200px。这样做是让它做到右边的固定地位，做到此时，成果如下- 接着用
margin-left: -100%，让其回到与两头局部一样高的地位，这就是圣杯布局的要害 margin-left：-100%示意向左挪动整个屏幕的间隔- 因为三个元素都加了浮动，所以配合
margin-left: -100%右边容器就能与两头局部同高
-
同理，设置左边（right）元素
position: relative, right:-220px, margin-left: -220px- 留神，这里的
margin-left是 220px。为什么这个是220px，和它本身宽度统一 - 留神 ，本身
margin-left为负时，就往左挪动，等它等于本身高度时就“升格”到上一层，当它等于 -100% 时，这个 100% 示意的是两头局部的宽度，所以就固定在右边了
- 留神，这里的
双飞翼布局
有人说“双飞翼布局是玉伯大大提出来的，始于淘宝UED”，其成果和圣杯布局一样，只是它把三栏布局比作一只鸟，两头内容局部分为三局部，左翅膀、两头、右翅膀。其技术关键在于它还有一层 div
HTML 构造如此：
<code class="html"><body>
<header>组成头部</header>
<section class="container">
<div class="main">
<div class="middle">两头局部自适</div>
<div class="left">右边栏固定宽度</div>
<div class="right">左边栏固定宽度</div>
</div>
</section>
<footer>组成尾部</footer>
</body>
CSS 构造如此：
<code class="css">body {
min-width: 700px;
}
header,
footer {
background: grey;
border: 1px solid #333;
text-align: center;
}
.left,
.right,
.main {
float: left;
min-height: 130px;
}
.main {
width: 100%;
background: red;
}
.main-inner {
margin: 0 220px 0 200px;
min-height: 130px;
}
.left {
margin-left: -100%;
width: 200px;
background: green;
}
.right {
margin-left: -220px;
width: 220px;
background: blue
}
footer {
clear: both;
}
成果如圣杯布局统一，不反复展现，它代码的关键在于先构建两头局部展现出，再通过 margin-left 实现浮动流
思考：为什么会考三栏布局?
以前的布局难点就是三栏布局，而且三栏布局还能引出 BFC，BFC 的作用之一就是自适应布局。而当初 flex: 1就能解决自适应布局的问题，所以这类考题曾经不多见了
总结
以前始终放心考这类破问题，因为齐全没筹备过。除了一次考右边固定宽，左边自适应外，就没考过 CSS 布局方面的问题，大略是因为曾经过期了
三栏布局两种解决办法
-
圣杯布局
- 浮动 + margin-left + 本身绝对定位
-
双飞翼布局
- 浮动 + margin-left + 两头局部再包裹一层
相同点：浮动 、margin-left
margin-left: -100% ：右边回升
margin-left: -220px：左边回升
线上demo：
- 圣杯布局
- 双飞翼布局
参考资料
- CSS 布局，float+margin负值实现圣杯布局
- CSS布局 — 圣杯布局 & 双飞翼布局
本文参加了 SegmentFault 思否征文「如何“反杀”面试官？」，欢送正在浏览的你也退出。
转载请注明原文链接：关于前端:圣杯布局和双飞翼布局
