width: 200px;
background-color: hotpink;
}
.right{
width: 200px;
background-color: rebeccapurple;
}
分析：从上面的结构和样式来看，页面上呈现了头部，中间主体内容、左右两栏以及尾部。默认情况下，他们独占一行。换句话说，就是五个块级盒子垂直排列。接下来的事就是要将左、右两个盒子挪到两边，接着让中间的主体内容自适应。
图示：
通过 flex 实现元素水平排列就是一行代码的事：
main{
display:flex;
}
加入上面的这行代码确实达到了三个元素在同一行排列的效果，但是也出现了两个问题：
-
主体元素因为结构是在最前面的（为了优先渲染），所以此时的排列顺序不对，正确的排列顺序应该是左、中、右这样的顺序。
-
因为父级容器开启了
flex布局，所以它里面的所有直接子元素就成了flex元素，这带来最直接的问题就是破坏了块级元素的流动性，他们不再是独占一行，取而代之的是shrink-to-fit宽度收缩到合适，所以，此时的主体元素宽度被挤压了。
效果如下：
只要解决上面的两个问题就实现了圣杯布局了，那么首先来解决第一个问题：元素排列。在 flex 布局中，改变元素的排列次序是非常简单的一件事，直接通过 order 来指定次序就可以解决了：
.center{
order: 2;
background-color: aqua;
}
.left{
order: 1;
width: 200px;
background-color: hotpink;
}
.right{
order: 3;
width: 200px;
background-color: rebeccapurple;
}
好了，排列的顺序对了，但是发现三个元素挤在一起了，我们需要将两边固定，中间自适应，所以要把左右两个固定在两端，这个也是非常容易，加上一行代码：
main{
display: flex;
justify-content: space-between;/加入这行代码/
}
加入的代码改变了主轴的排列方式，左右两个元素紧贴左右两边，中间的元素也居中了。
最后，剩下的就是将中间的主体改为自适应，弹性布局处理富裕空间还是一件难事吗？一行代码即可：
.center{
order: 2;
flex: 1;/加入这行代码/
background-color: aqua;
}
效果：
完整代码：
*{
margin: 0;
padding: 0;
}
header,footer{
height: 100px;
background-color: #eeeeee;
}
main>div{
height: 100px;
}
main{
display: flex;
justify-content: space-between;
}
.center{
order: 2;
flex: 1;
background-color: aqua;
}
.left{
order: 1;
width: 200px;
background-color: hotpink;
}
.right{
order: 3;
width: 200px;
background-color: rebeccapurple;
}
从上面来看，通过 flex 来实现圣杯布局简直再简单不过了，代码非常简洁，但是如果要考虑兼容性的问题就不是那么适合了。这时候就需要使用下面的第二种方式。
首先，父级容器通过内边距将容器压缩，压缩的空间就是左右两栏固定的宽度：
main{
padding: 0 200px;/添加这行代码/
}
显然，此时的效果就是将盒子压缩了，接着，通过浮动让他们在同一行排列：
main>div{
height: 100px;
float: left;/添加这行代码/
}
一旦开启了浮动，则必然要考虑的问题就是高度塌陷。是的，此时的父容器已经无法由子元素撑开了，高度塌陷了。
main:after{
content: ‘’;
display: block;
clear: both;
}
好了，高度塌陷解决了，但是此时的效果好像距离目标好像也差得太远了，因为浮动，改变了盒子模型，块级元素的流动性被破坏了，所以没有固定宽度的中间元素的宽度收缩到合适了（shrink-to-fit）。所以，还需要解决这个问题：
.center{
width: 100%;/添加这行代码/
background-color: aqua;
}
好了，宽度恢复正常了，但是左右两栏的元素又被挤下去了，所以，最后的问题就是将它们挪动到适合的问题。然后解决这个问题也不难，使用负外边距和定位足以：
.left{
/相对定位将元素挪至左栏位置/
position: relative;
left: -200px;
/负外边距将元素挪至跟中间元素的左上角重叠/
margin-left: -100%;
width: 200px;
background-color: hotpink;
}
右栏元素：
.right{
margin-right: -200px;/将元素挪到右栏位置/
width: 200px;
background-color: rebeccapurple;
}
完整代码：
*{
margin: 0;
padding: 0;
}
header,footer{
height: 100px;
background-color: #eeeeee;
}
main>div{
height: 100px;
float: left;
}
main{
padding: 0 200px;
}
main:after{
content: ‘’;
display: block;
clear: both;
}
.center{
width: 100%;
background-color: aqua;
}
.left{
position: relative;
后话
对于面试，说几句个人观点。
面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。
所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。
1229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
