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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS经典布局之圣杯布局、双飞翼布局_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4351字，纯文字阅读大概需要7分钟。

内容图文

当我们在用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，在代码优化方面更为突出一点。

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

内容总结

以上是互联网集市为您收集整理的CSS经典布局之圣杯布局、双飞翼布局_html/css_WEB-ITnose全部内容，希望文章能够帮你解决CSS经典布局之圣杯布局、双飞翼布局_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---