PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

原创
2016-06-24 11:38:13 1592浏览

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

圣杯布局

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

This is Top

This is Main

This is left

This is right



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


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

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

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。