圣杯布局与双飞翼布局：理解与区别，附代码实现

圣杯布局和双飞翼布局是两种常用的三栏网页布局方式。

圣杯布局和双飞翼布局的主要区别在于如何处理中间栏的宽度。在圣杯布局中，中间栏使用margin来腾出位置，而在双飞翼布局中，中间栏使用负margin来使它与左右两栏重叠。

以下是两种布局的实现代码：

圣杯布局：

HTML：

<div class="container">
  <div class="middle"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.middle {
  flex-grow: 1;
  margin: 0 200px;
}

.left, .right {
  flex-shrink: 0;
  width: 200px;
}

双飞翼布局：

HTML：

<div class="container">
  <div class="middle">
    <div class="inner"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS：

.container {
  position: relative;
  width: 100%;
}

.middle {
  float: left;
  width: 100%;
}

.inner {
  margin: 0 200px;
}

.left {
  float: left;
  margin-left: -100%;
  width: 200px;
}

.right {
  float: right;
  margin-right: -100%;
  width: 200px;
}