说说圣杯布局

  • 时间:2018-06-28 22:14 作者:极客教程 来源:极客教程 阅读:258
  • 扫一扫,手机访问
摘要:前言「圣杯布局」—— 虽然这是一个很古老的话题了,而且网上早就有许多相关的文章,但作为前台入门和面试的必备知识之一,还是觉得有必要温故而知新一番。理解一下它的原理甚至是历史,而不应盲目引使用和浮于表面。圣杯的由来圣杯布局是探讨「三栏液态布局」的实现,它最早出自于谁或者许不得而查了,但最早的完美实现是

前言

「圣杯布局」—— 虽然这是一个很古老的话题了,而且网上早就有许多相关的文章,但作为前台入门和面试的必备知识之一,还是觉得有必要温故而知新一番。理解一下它的原理甚至是历史,而不应盲目引使用和浮于表面。

圣杯的由来

圣杯布局是探讨「三栏液态布局」的实现,它最早出自于谁或者许不得而查了,但最早的完美实现是来自于 Matthew Levine 于2006年在「A LIST APART」上写的一篇文章,它主要讲述了网页中关于最佳圣杯的实现方法。

所谓液态布局是相对固态布局而言的,固态布局就是固定值不变的布局,液态就好比在容器里到了一杯水,它能随着容器宽度的变化而自适应宽度。

在这篇文章中,作者指出了当时的少量实现方式所存在的问题,如:必需按照源顺序(在 DOM 中体现为先写 Left,而后 Middle,最后,Right)等,它将可可以导致代码不够灵活,尤其是从 DOM 的载入顺序上来说,中间的内容不可以被首先加载。

因而他给出一个方案,它将:

  1. 两边带有固定宽度中间能流动(fluid);
  2. 允许中间一栏最先出现;
  3. 允许任意一栏放在最上面;
  4. 仅需一个额外的 div 标签
  5. 仅需非常简单的 CSS,带上最少的兼容性补丁

文中还提到了他的这个想法是基于「One True Layout」 和 「 Eric Meyer’s adaptation」两篇文章带来的灵感。

实现方式

接下来就言归正传,说下具体的实现思路:

首先我们需要布局的 HTML 代码如下,作者在这里为了便于表达,对标签用了非语义化的 id,他建议在其余任何正式项目中尽量用语义化的 id。例如,我们需要实现的是左侧宽度为 200px,右侧宽度为 150px,中间是流动的布局。

说说圣杯布局

正如他先前提到的,只是加了一层额外的 div 它的 id 是 container。它的 CSS 内容非常简单,具体代码如下:

说说圣杯布局

说说圣杯布局

下面我们来分步观察它的实现逻辑:

第1步 建立框架

先写 header, footer 和 container 三个 div

说说圣杯布局

我们将 container 的内边距设置为左右两边各自的宽度。它看起来就像这样:

说说圣杯布局

image.png

第2步 加入三栏

此时我们有了基本框架,能把三栏塞进去了。

说说圣杯布局

接着我们给每一栏配上合适的宽度,并将它们设为浮动。同时我们需要清理 footer 的上下环境,以免遭跟上面三栏一起浮动。

说说圣杯布局

注意这里中间一栏的 100% 宽是基于它的父容器 container 的宽度而言的,因为 container 设置了内边距,因而中间栏看起来就处在了网页的中间,但左右两栏因为排在中间栏的后面,且由于空间不够被挤到了中间栏的下面,如下图所示:

说说圣杯布局

image.png

第3步 把左侧栏放上去

中间栏已经就位,剩下的事情就是把左右两栏放上去了,接下来我们先放左侧栏。

为了详述过程,这里将分为两个小步骤。首先,我们先将它的外边距设置为 -100%,这样一来,因为浮动的关系,左侧栏就可以上位,与中间栏交叠在一起,并占据了左边。而右侧栏因为左侧栏的上位,自动向前浮动到了原来左侧栏的位置。

说说圣杯布局

image.png

接着我们要使用到相对定位属性(relative),并设置一个与左侧栏等宽的偏移量:

说说圣杯布局

能看到,它设置的 right 属性就是相对于 container 的右边线向左偏移 200px,如此一来,它就完美地跑到了 container 左内边距的位置,也就是我们希望它呆的地方,如下图所示:

说说圣杯布局

image.png

第4步 把右侧栏放上去

最后,我们需要把右侧栏放上去,此时只要利使用上面的原理把他放到 container 的右外边距的位置就可,我们需要再一次设置一个负外边距的值,它等于右侧栏的宽度:

说说圣杯布局

至此,所有的栏目都就位了~

说说圣杯布局

最终效果能浏览器搜索极客教程 便可查看!

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部