圣杯布局的学习笔记~

圣杯布局的优点就是优先渲染中间的元素，如下结构所示，浏览器渲染时是按序执行，因此会优先渲染center元素。

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

1.首先使得container为左右两个元素预留padding

.container{
    padding: 0 150px 0 200px;
}

2.其次，容器container内的三个子元素均设置浮动属性，产生浮动流

.center,.left,.right{
    float:left;
}

3.为center元素设置属性，注意三个子元素的宽高都需要添加，center的宽度应设置为100%，因为其宽度是自适应的。

    .center{
        width: 100%;
        height: 300px;
        background-color: blue;   
    }

左右灰色区域即为我们提前预留的padding

4.设置left元素的属性
当我们只设置宽高时，由于center的宽度是100%，占满了第一行，left元素只能排在第二行，不能与center处在同一行。

.left{
        height: 300px;   
        width: 200px;
        background-color: red;  
}

接下来我们利用负外边距，使得left元素能够与center处在同一行。即设置margin-left:-100%，这样能够保证left元素和center元素的左边缘是对齐的。除此之外，还可以使用position:absolute达到此目的，因为position和float是处于不同层级的，可以理解为彼此看不到，当同时存在position:absolute和float:left时，由于absolute的优先级更高，float就不起作用了。

//方法1
.left{
        height: 300px;   
        width: 200px;
        background-color: red;  
        margin-left:-100%;
}
//方法2
.left{
        height: 300px;   
        width: 200px;
        background-color: red;  
        position:absolute;
}

此时的left元素已经与center元素处在同一行，但是left元素遮盖了center元素，此时我们需要让left移动到我们预留的padding区域，就可以解决这个覆盖的问题。

为left元素继续设定left属性，但是这里需要注意，left属性对position:static的盒子是不起作用的，因此我们需要给left元素设定position。
此处我们是希望left元素在此位置的基础上，左移200px的，因此应该将position设定为relative，所以我们刚刚提到的方法2就不起作用了。

.left{
        height: 300px;   
        width: 200px;
        background-color: red;  
        margin-left:-100%;
        position:relative;
        left:-200px;
}

5.设置right元素的属性
同样我们可以利用负外边距，将right元素和center元素移动到同一行。

    .right{    
        width: 150px;
        height: 300px;
        background-color: green;
        margin-right: -150px;
    }