小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前言
圣杯布局和双飞翼布局是css的经典布局，也是大厂前端面试的高频考点。
两个布局的实现很简单，但是想要理解实现方法背后的原理却并不简单，本篇文章会带你一点一滴刨析，让你不仅仅是会用，话不多说，走起~
圣杯布局
圣杯布局如图:
而且要做到左右宽度固定，中间宽度自适应。
1. 利用flex布局
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.header,
.footer {
height: 40px;
width: 100%;
background: red;
}
.container {
display: flex;
}
.left {
width: 200px;
background: yellow;
}
.middle {
flex: 1;
background: pink;
}
.right {
width: 250px;
background: blue;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
2. float布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.header,
.footer {
height: 40px;
width: 100%;
background: red;
}
.footer {
/* footer 清除浮动 */
clear: both;
}
.container {
padding-left: 200px;
padding-right: 250px;
}
.container div {
position: relative;
float: left;
}
.middle {
width: 100%;
background: yellow;
}
.left {
width: 200px;
background: pink;
margin-left: -100%;
left: -200px;
}
.right {
width: 250px;
background: blue;
margin-left: -250px;
left: 250px;
}
</style>
</head>
<body>
<div class="header">这里是头部</div>
<div class="container">
<div class="middle">中间部分</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">这里是底部</div>
</body>
</html>
这种float布局是最难理解的，主要是浮动后的负margin操作，下面我们详细解析：
首先要注意我们实现该布局的三个盒子的父盒子宽度不是100%，左右是添加了padding的.container {padding-left: 200px;padding-right: 250px;} ，而左右的padding值正是left和right的宽度。
其次，非常重要的一个概念，子盒子里的margin值的百分比是基于父盒子的。
F12打开控制台，我们去掉left和right最难理解的样式：
激活left的margin-left（注意：实践时逐渐改变这些值可以非常直观的理解原理），因为margin的100%是基于父盒子的，所以我们发现left逐渐往左移动，超出父盒子边界（margin的负值边界是基于父盒子的边界），当margin-left: -200px;时，left就顶到上层，处于最右边的位置了。
当margin-left: -100%;时，处于最左边的位置了。
这时候，再让left往左移动一个自身的宽度：添加left: -200px;（left值也是基于父盒子的边界），就到我们的目标位置了。
同理，对于right：当margin-left: -250px;时，right就顶到上层，处于最右边的位置。
这时候，再让right往右移动一个自身的宽度：添加left: 250px;（注意：向右移动是正值哦，上面的是向左移动，所以是负值left: -200px;，不要记混了），就到我们的目标位置了。
到此，实现圣杯布局并且对他的原理进行了解析。
双飞翼布局
有了圣杯布局的铺垫，双飞翼布局也就问题不大啦。这里采用经典的float布局来完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
min-width: 600px;
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.center .inner {
margin: 0 200px;
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
}
</style>
</head>
<body>
<article class="container">
<div class="center">
<div class="inner">双飞翼布局</div>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
</body>
</html>
双飞翼布局实现的原理，参考上面圣杯布局的解析。
注意：双飞翼布局的left和right是在主盒子里面，而不是在外面，所以我们只需要通过marin-left的负值就可以实现，不需要通过设置left再往左或者往右移动。
为什么center中间还要加一个inner呢？而且inner还要设置margin: 0 200px;？
<div class="center">
<div class="inner">双飞翼布局</div>
</div>
.center .inner {
margin: 0 200px;
}
这也算是双飞翼布局的一点要点，添加的inner以及他的margin: 0 200px;正是双飞翼布局中间部分布局的核心，如果没有这点，就不是完整的双飞翼布局。这个inner就是我们以后在该布局中间区域添加内容的父盒子（或者说是顶层盒子）。
