昨天面试的时候被问到圣杯布局，之前知道怎么实现三栏布局，但是突然问到圣杯布局，当时我就凭着感觉说了两种方法，因为之前自己没有实现过，面试完之后赶紧写了demo来验证一下。
圣杯布局是什么
- 三列布局，中间宽度自适应，两边定宽；
- 中间栏要在浏览器中优先展示渲染；
是不是比三栏布局多了点要求呢，嘿嘿
实现
HTML代码如下：
<div id="container">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
实现一：使用浮动
- 先给左右列固定宽度，然后给中间列的宽设为
100%，都设置为向左浮动：
#middle {
background-color: lightpink;
height: 300px;
width: 100%;
float: left;
}
#left {
background-color: red;
height: 300px;
width: 100px;
float: left;
}
#right {
background-color: aqua;
height: 300px;
width: 100px;
float: left;
}
此时它的效果为：
- 让左右列与中间列显示在一行
给#left设置margin-left: -100%;，给#right设置margin-left: -100px;，那么此时我的页面显示为：
但是有没有发现我的
middle这个字不见了，那是因为被压住了，此时我的左右列覆盖到了中间列上面
- 中间盒子自适应
那么想让中间盒子自适应，就给我们的父元素加padding值：
#container {
padding: 0 100px;
}
此时的效果为：
与上面的图相比，两边多了空，那么此时我的
middle还是没有出现，所以说明我的左右两列还是压着中间那列的，所以我们就应该将左右两列给加定位，然后让他们分别向左右移动：
#left {
position: relative;
left: -100px;
}
#right {
position: relative;
right: -100px;
}
此时我们的圣杯布局就完成啦：
实现二：用flex布局
使用flex布局就简单多了呢，代码如下：
#middle {
background-color: lightpink;
height: 300px;
display: flex;
flex:1;/*简写，1,1，auto的意思*/
}
#left {
background-color: red;
height: 300px;
flex: 0 0 100px;/*默认为横向的，所以这里的100px相当于宽度*/
order:-1;/*设置left的位置在middle之前*/
}
#right {
background-color: aqua;
height: 300px;
flex: 0 0 100px;/*默认为横向的，所以这里的100px相当于宽度*/
}
#container{
display: flex;
flex:1;/*简写，1,1，auto的意思*/
}
那么我们的圣杯布局也就完成啦：
