圣杯布局

圣杯布局是一种经典的三栏分布式布局，它的特点是，两边固定宽度，中间一栏宽度随着浏览器页面缩放而自适应地改变。下面给出具体实现过程：

1.给出 HTML 结构

<!-- HTML 结构 -->
<div class="container">
    <div class="middle"> middle </div>
    <div class="left"> left </div>
    <div class="right"> right </div>
</div>

这里要注意的是，要将中间的元素块放在前面，因为中间的块是优先渲染的。

2.设置左浮动

设置 css 属性

• 设置 middle 块 width : 100%
• 将三个块的 float 属性均设置为 float : left

• 为了便于观察，这里分别给三个div设置不同的颜色

  <!-- CSS 代码 -->
  .middle {
      float: left;
      width: 100%;
      height: 200px;
      background-color: Aquamarine;
  }
  
  .left {
      float: left;
      width: 200px;
      height: 200px;
      background-color: Coral;
  }
  
  .right {
      float: left;
      width: 300px;
      height: 400px;
      background-color: Moccasin;
  }

  设置完成后页面效果如下：

  

  3.设置左边距

  完成上一步设置后，三个元素已经是紧挨着排列了，这时，只需要设置 left 和 right 元素的左边距，便可以实现它们的上移。
  

• 给 left 元素设置 margin-left 为 -100%，因为它距离最左边相差了整个浏览器的宽度
• 给 right 元素设置 margin-left 为它自身宽度的负值

• .left {
      margin-left: -100%;
  }
  .right {
      margin-left: -300px;
  }

  此时页面效果：
  
  可以看到，left 和 right 元素已经顺利到达它们正确的位置，但是！此时 middle 的内容好像被遮挡住了，不信我们测试一下。

  在 middle 元素中添加测试文字，效果如下：
  

  可以很清楚地看到，两边的文字确实被 left 和 right 遮挡了，接下来，我们要解决这个问题。

  4.解决遮挡问题

  要解决遮挡问题，我们可以给父元素设置一个内边距 padding 值

  .container {
      padding: 0 300px  0 200px;
  }

  左右边距分别设置为 left 和 right 元素的宽度
  此时效果如下：
  

  看可以看到虽然此时容器内有了内边距，但是页面左右两边却出现了空白，并且也没有解决遮挡问题。

  接下来还需要最后一步：给 left 和 right 设置相对位置偏移

  .left {
      position: relative;
      left: -200px;
  }
  
  .right {
      position: relative;
      right: -300px;
  }

  到这里就大功告成啦！