【聊一聊】css中的经典布局——圣杯布局

     什么是圣杯布局？

     圣杯布局是三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染。也就是在html文档中，中间的部分要写在左右布局之前。

     当然，这种布局是面向PC端的，移动端由于屏幕宽度较小，不推荐多列布局。

     圣杯布局需要用到什么东西？

     （1）圣杯布局，需要用到浮动，负边距，相对定位（相对于自身定位relative），这种方法不需要添加额外的标签。

     （2）关于margin或者padding单位是百分比的时候，它是基于父级元素或者包含块的宽度来进行计算的。

     探索圣杯布局

     首先我们列出一个基本的DOM结构。      

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

    效果最终样式：    

*{
        padding:0;margin:0;
    }
    .header,.footer{
        height:50px;
        width:100%;
        background:#666;
        clear:both;
    }
    .bd{
        padding-left:150px;
        padding-right:190px;
    }
    .main{
        width:100%;
        float:left;
        background:#D6D6D6;
    }
    .left{
        width:150px;
        background:#E79F6D;
        float:left;
        margin-left:-100%;  /*相对于包含快的宽度*/
        position:relative;
        left:-150px;
    }
    .right{
        float:left;
        width:190px;
        background:#77BBDD;
        margin-left:-190px;
        position:relative;
        right:-190px;
    }

View Code