圣杯布局和双飞翼布局

圣杯布局的要求

header和footer各自占领屏幕所有宽度，高度固定。 中间的container是一个三栏布局。 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度

圣杯布局有三种实现方式

【1】浮动

先定义好header和footer的样式，使之横向撑满。
在container中的三列设为浮动和相对定位(后面会用到)，center要放在最前面，footer清除浮动。
三列的左右两列分别定宽200px和150px，中间部分center设置100%撑满
这样因为浮动的关系，center会占据整个container，左右两块区域被挤下去了
接下来设置left的 margin-left: -100%;，让left回到上一行最左侧
但这会把center给遮住了，所以这时给外层的container设置 padding-left: 200px;padding-right: 150px，给left和right空出位置
这时left并没有在最左侧，因为之前已经设置过相对定位，所以通过 left: -200px; 把left拉回最左侧
同样的，对于right区域，设置 margin-left: -150px; 把right拉回第一行
这时右侧空出了150px的空间，所以最后设置 right: -150px;把right区域拉到最右侧就行了

【2】flex弹性盒子

• header和footer设置样式，横向撑满。
• container中的left、center、right依次排布即可
• 给container设置弹性布局 display: flex;
• left和right区域定宽，center设置 flex: 1; 即可

• grid布局

• (3) grid 布局
  grid实现圣杯布局相对简单，容易理解

  grid-template-rows: 100px 300px 100px;
  grid-template-rows：定义行数，并且设置每行的高度
  grid-template-columns: 200px auto 150px;
  grid-template-columns：定义列数，并且设置每列的宽度 auto：自适应
  grid-row: 1;
  grid-row：设置子元素在第一行
  grid-column: 1/4;
  设置子元素占几列。1/4表示，该子元素占1、2、3列；2/4表示占2、3列。

• 双飞翼布局

  什么是双飞翼布局？
  双飞翼布局最早是淘宝团队提出的，是针对圣杯局部优化的解决方案。主要是优化了圣杯布局中开启定位的问题。

• 圣杯布局相比于双飞翼布局，只是在center元素里面添加了一个inner子级元素，解决了，center元素被left和right元素覆盖的内容。
  因此，给inner元素添加一个margin-left和margin-right就可以将内容显示在中间，而不会被左右元素覆盖部分内容。