圣杯布局

1、圣杯布局 它的html结构如下（敲黑板，中间内容区域放前排）。

接下来让我们开始写css...

a、先给父亲元素撑个高度，比如说300px。然后给三个区域添上背景颜色（为了好区分）,高度都设为100%， 左右区域固定宽度200px，中间区域宽为100%（！这个一定要设置）。代码是这样的：

然后效果是这样的：

b、三个区域块都设置浮动（float:left）代码是这样的：

然后效果是这样的：

c、然后重点来了。如何将蓝色那块显示在左边？因为中间的宽度是设置成100%的，所以左边需要magin-left:-100%, 然后蓝色区域就会跑到左上角覆盖住部分粉色区域。而紫色区域因为蓝色跑了，所以它会到蓝色以前的位置上。代码是这样的：

效果是这样的：

d、接下来要把紫色弄到布局的右边。只要移动自身的一个宽度就行了。margin-left:-200px

效果是这样的：

e、前方高能！这样好像是布局好了，但是！！！左右两块区域都覆盖了一部分粉色区域，有没有注意到‘圣杯中间’四个字不见了， 并不是我删除掉了，而是被蓝色区域覆盖了，所以现在需要把覆盖的部分腾出来，这时候就要在父元素上设置padding:0 220px, 左右都留出220px(200px的宽度+20px的缝隙)的区域，现在代码是这样子的：

效果是这样字的：

f、最后一步，将蓝色块和紫色块边都设置成相对定位position:relative,相对定位是相对于自身定位的， 然后蓝色区域相对自身左移220px,紫色区域相对于自身右移220px(就是父元素设置padding的那个大小)， 代码是这样子的：

效果是这样子的：

结束语：酱酱酱酱！最终圣杯布局模式就完成了！