什么是圣杯布局和双飞翼布局

两者实现的功能都一样，都是用于实现两侧的宽度不变，中间的宽度自适应的三栏布局

圣杯布局的步骤

1.创建个容器，里面放三个盒子
2.设置两侧盒子的宽度（固定）
3.设置中间盒子的宽度等于容器的宽度（100%）
4.设置容器的padding等于两侧盒子的宽度
5.让三个盒子都在同一个方向上浮动
6.设置左边盒子的margin-left = -100%
7.通过定位调整左边的盒子，让其不盖住中间的区域
8.设置右边盒子的margin-left = -自身宽度
9.通过定位调整右边的盒子，让其不盖住中间的区域
10.给容器设置一个最小的宽度，防止缩小后变型

<style>
   * {
     margin: 0;
     padding: 0;
   }
   .wrap {
     background-color: purple;
     padding: 0 200px;
     min-width: 400px;
   }
   .content {
     width: 100%;
     height: 200px;
     background-color: skyblue;
     float: left;
  }
  .left, .right {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
    position: relative;
  }
  .left {
    margin-left: -100%;
    left: -200px
  }
  .right {
    margin-left: -200px;
    right: -200px;
  }
</style>

<div class="wrap">
  <div class="content"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

双飞翼布局的步骤

1.创建个容器，里面放三个盒子
2.设置两侧盒子的宽度（固定）
3.设置中间盒子的宽度等于容器的宽度（100%）
4.让三个盒子都在同一个方向上浮动
5.给中间盒子添加一个子盒子
6.给子盒子设置margin 0 两侧盒子的宽度
7.设置左边盒子的margin-left = -100%
8.设置右边盒子的margin-left = -自身宽度

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .wrap {
    background-color: purple;
  }
  .content {
    width: 100%;
    height: 200px;
    background-color: skyblue;
    float: left;
  }
  .content-item {
    height: 200px;
    margin: 0 200px;
    background-color: blue;
  }
  .left, .right {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
  }
  .left {
    margin-left: -100%;
  }
  .right {
    margin-left: -200px;
  }
</style>

<div class="wrap">
  <div class="content">
    <div class="content-item"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>