【聊一聊】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

左中右布局变化过程

 1、中间部分需要根据浏览器宽度的变化而变化，所以要用100%，这里设左中右向左浮动，因为中间100%，左层和右层根本没有位置上去，被挤下去了。

    .main{
        width:100%;
        float:left;
        background:#D6D6D6;
    }
    .left{
        width:150px;
        background:#E79F6D;
        float:left;
    }
    .right{
        float:left;
        width:190px;
        background:#77BBDD;
    }

到这里我们会发现，main由于是100%的宽度，所以它会把left和right两块给挤下去，而且由于在文档中，main是在left和right之前渲染的，因此，它会在left和right的上面显示。

如果我把html的顺序调一下。

那么，文档渲染的顺序也会相应发生变化。

 2、把左层设置margin-left:-150px后，发现left上去了，因为负到出窗口没位置了，只能往上挪。（如果margin-left:-100px发现还是上不去，而是左移出窗口，留下剩余的在显示在窗口中）。

3、那么按第二步这个方法，可以得出它只要挪动窗口宽度那么宽就能到最左边了，利用负边距，把左右栏定位（左栏先上去，右栏再上去）。

    .main{
        width:100%;
        float:left;
        background:#D6D6D6;
    }
    .left{
        width:150px;
        background:#E79F6D;
        float:left;
        margin-left:-100%;  /*相对于包含快的宽度*/
    }
    .right{
        float:left;
        width:190px;
        background:#77BBDD;
        margin-left:-190px;
    }

4、然而问题来了，中间被左右挡住了啊，只好给外层加padding了。

.bd{
        padding-left:150px;
        padding-right:190px;
    }

5、但是加了之后左右栏也缩进来了，于是采用相对定位方法(relative相对自身定位)，各自相对于自己把自己挪出去，得到最终结果 

   .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;
    }

因此，这样就实现了，三列布局，左右固定宽度，中间随浏览器宽度进行自适应。

 

  

转载于:https://www.cnblogs.com/hl-520/p/5753075.html