说说圣杯布局

作者 : 开心源码 本文共680个字,预计阅读时间需要2分钟 发布时间: 2022-05-11 共57人阅读

前言

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

圣杯的由来

圣杯布局是探讨「三栏液态布局」的实现,它最早出自于谁或者许不得而查了,但最早的完美实现是来自于 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,中间是流动的布局。

说说圣杯布局

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 说说圣杯布局

发表回复