圣杯布局

圣杯布局的核心意思就是左右宽度固定，中间自适应，而且中间部分需要优先加载，这样就有了页头，内容与页脚了，如下图：

我们确定了架构就可以编写HTML框架了，因为主区域的内容需要优先加载，因此需要把标签放置在前面，也就是header标签的后面，为了方便大家观看，这里设置了背景颜色和文字居中的效果：

现在我们可以看到每个区域都按照顺序独占一行，显然不是我们想要的效果，我们需要把主区域、左区域、右区域都设置在同一行里面，这里我们可以设置左浮动，这样它们就可以在同一行里了。

但是可以看到底部也跑到同一行里面了，这是因为浮动引起的塌陷问题，为了解决这个问题，这个时候我们就需要把主区域，左区域和右区域加在一个容器里，再对这个父容器进行清浮动的操作。

观察一下现在的布局，主区域要放在中间，但是目前在左边，需要把左区域的内容移动到主区域的左边，右区域的内容移动到主区域的右边，，这样的布局才合理。那么我们就要使用神奇的负边距了。假设这里有三个元素，都给他们设置向左浮动，并且都有长度和宽度。

目前它们显示的是正常排列，如果此时我们为第二个元素设置左外边距为-100px，可以看到第二个元素向左偏移并且覆盖了第一个元素：

因为偏移的距离刚好是一个元素的宽度，但是如果我们设置做外边距为-200px，第二个元素就会直接消失了，也不会覆盖第一个元素，因为偏移到窗口看不到的地方了，现在我们需要让第二个元素回来，并且占据第一个位置，而且不能覆盖任何元素，那么我们就需要为这三个元素添加一个父元素，再给父元素设置内边距，内边距的距离刚好是元素的宽度：

这个时候就可以看到第二个元素回来了，并且这是我们想要的排列方式。但是如果第一个元素宽度设置为百分之百时，

我们可以看到设置了外边距的第二个元素覆盖在了第一个元素右边的一部分，这个时候我们如果想要第二个元素完全跑在第一个元素的左边，我们就需要给第二个元素的负边距设置为百分之百：

我们再回到原来的代码，为父元素添加内边距，并且第二个元素的负边距为百分之百，左区域就成功地显示在主区域的左边了：

那么要把右区域设置在主区域的右边，我们可以直接给右区域设置右外边距为-100px：

但是这里有一个问题，左区域与右区域会挡住主区域，这里可以用相对定位解决这个问题：

这样，我们的圣杯布局就成功了。