CSS-布局3-圣杯布局

1、圣杯布局概述

圣杯布局是有淘宝的工程师提出，巧妙的利用我们介绍过的定位技术、负边距、相对定位、浮动、组合运用。轻松实现常见布局。
  我们在前面介绍过，使用浮动特性，实现三列布局，但是使用div布局，有一个问题，那就是内容区，在左边区和右边区之后渲染。下面我们使用圣杯布局的思路，实现一个内容区渲染在前的三列布局。

2、圣杯布局实现步骤

（1）负边距技术实现初步效果
可以参考负边距定位章节，了解实现细节。

    
    
    


    
heder
    

        
center
        
left
        
right
    
    
footer

运行效果：

image.png

（2）利用padding实现，将center元素固定在中间

.container{
    padding-left:200px;
    padding-right:200px;
    height:200px;
}

运行效果：

image.png

（3）利用相对定位技术，将元素拉回左边和右边
left 添加如下样式:

position:relative;
left:-200px;

right 添加如下样式:

position:relative;
right:-200px;

运行效果：

image.png

3、布局缺陷
（1）左边区块和右边区块，利用了相对布局。
（2）内容区高度塌陷。