负边距与双飞翼布局

负边距与双飞翼布局

负边距

当设置top和left方向的负边距时，元素本身向指定方向移动。当设置bottom和right方向的负边距时，元素本身不移动，处于元素后方的元素向前流动，覆盖其上。

圣杯布局

圣杯布局是一个三栏布局，左右定宽，中间自适应。

HTML布局

  <header>Header</header>
  <div class="box">
    <div class="main">main</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
  <footer>Footer</footer>

得到如图所示的三个div。

CSS设置

下面就开始最这三个div进行操作。

1. 首先要设置中间的div宽度为100%，让其能够自适应。左右的div设置固定宽度，并且让他们浮动起来，不然无法跟main出现在同一行。

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

.left {
  width: 100px;
  float: left;
}

.right {
  width: 200px;
  float: left;
}

这时我们得到如下图所示的内容，因为main占据了100%的宽度，left和right只能在main下面显示。

2. 现在我们使用上面提到的负边距技巧，将left和right与main放在同一行。当left的margin-left等于其本身宽度时，它将往上挪，如果设置为100%，那么就等于挪动到最开始的位置。所以我们将left的margin-left设置为-100%，right的margin-left设置为-200px，那么就可以将两者与main放到同一行。

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

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

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

得到结果如下图。

但是，我们发现main已经被left和right覆盖了一部分，这会对显示内容造成影响。圣杯布局采用的解决办法是，使用padding，将整体的显示区域缩小，留出left和right的空间。然后，再用相对定位，把left和right分别左移和右移。
3. 使用padding将整体收缩。再将left和right移出去。

.box {
  padding-left: 100px;
  padding-right: 200px;
}

跟着用相对定位relative将left和right移出去。

.left {
  width: 100px;
  float: left;
  margin-left: -100%;
  position: relative;
  right: 100px;
}

.right {
  width: 200px;
  float: left;
  margin-left: -200px;
  position: relative;
  left: 200px;
}

得到最终结果。

双飞翼布局

双飞翼布局是圣杯布局的一个改进，主要不同在于上面的第三步。首先用一个div将main的内容包裹，然后设置main内容div的左右边距为left和right的宽度。这样，也可以达到令main的内容显示区域避开left和right范围的作用。
HTML代码如下，用一个div包裹main的内容。

HTML布局

  <div class="box">
    <div class="main">
      <div class="main-content">Main</div>
    </div>
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>

CSS代码如下，不需设置padding，也不需要使用相对布局。

CSS设置

.box {
  /* padding-left: 100px;
  padding-right: 200px; */
}

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

.main-content {
  margin-left: 100px;
  margin-right: 200px;
}

.left {
  width: 100px;
  float: left;
  margin-left: -100%;
  /* position: relative;
  right: 100px; */
}

.right {
  width: 200px;
  float: left;
  margin-left: -200px;
  /* position: relative;
  left: 200px; */
}

参考连接

1. 圣杯布局的实现过程 - tinyphp - 博客园
2. 双飞翼布局和圣杯布局的对比 - tinyphp - 博客园