CSS经典布局之圣杯布局、双飞翼布局_html/css_WEB-ITnose

当我们在用CSS进行页面布局时，常常会遇到：三栏布局，两边顶宽，中间自适应且优先渲染。回想我们所接触过的QQ空间，人人网等个人主页时，常常会遇到此类的布局方式，因此我们应该如何解决？

圣杯布局

圣杯是指一种常用的网页布局，可以由现有的技术（无一没有缺点）来实现，找到一种最优的实现方法就好像寻找难以捉摸的圣杯一样。
我们先贴出实现代码再来具体讲解：

    
This is Top
    
        
This is Main
    
    
        
This is left
    
    
        
This is right
    
    
 This is L's page

1.*代表通配符，表示所有的DIV都适用于所设属性，设为0是为了对浏览器无留白，全填充
2.margin可能有以下四种情况的属性：
（1）margin 5px 10px 15px 20px
表示上边距5px，右边距10px，下15px，左20px
（2）margin 5px 10px 15px
表示上边距5px，左/右边距10px，下边距15px
（3）margin 5px 10px
表示上/下边距5px，左/右边距10px
（4）margin 5px
表示上/下/左/右边距为5px
3.float:left，表示向左浮动，因为我们的三列元素都在同一排的，所以我们可以给他一个相同的向左浮动
4.width:auto，表示宽度自适应，也许会随着文档流的改变而改变
5.position:relative，表示相对定位，也是圣杯布局中最重要的一部分，我之前有篇文章也是讲在position中relative和absolute的区别，不懂的地方可以参考，这里就不再具体说明了
6.当我们需要使用到颜色渲染布局时，我们的颜色值应该为相应的颜色代码，比如#FFFFFF，而不是用颜色名称，如red、black，因为不同的网页可能会出现的渲染效果是不同的。

双飞翼布局

双飞翼布局是淘宝UED对圣杯布局的一种优化，其中main可以看成是鸟的身体，sub和extra则是鸟的两个翅膀，在布局的时候，我们先放最重要的，再将翅膀放到适当的地方。
还是先来看代码：

    
This is Top
    
        
            
This is Main
        
    
    
        
This is left
    
    
        
This is right
    
    
 This is L's page

观察可以发现，圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部向左float浮动，但左右两栏各加上一个负边距让其跟中间的DIV并排，以形成三栏布局。
而他们的不同之处就在于“如何让中间栏的内容不被遮挡”
圣杯布局，将中间DIV设置了左右padding-left和padding-right，将左右两个DIV用相对布局position:relative并分别配合left和right属性，留出左右两栏的位置，移动后不遮挡中间DIV
双飞翼布局，直接在中间DIV内部创建子DIV用于放置内容，在该子DIV里用margin-left和margin-right为左右两栏DIV留出位置，而省去了relative属性。
简单总结，双飞翼布局之所以比圣杯布局更为简单，是因为比他多用一个DIV去承载内容，而忽略到relative，在代码优化方面更为突出一点。

版权声明：本文为博主原创文章，未经博主允许不得转载。