01Web 布局技术演进：了解 Web 布局发展史
#
自 1989 年至今，Web 已经有 30 多年的历程了。30 多年来，Web 也发生了翻天覆地的变化，Web 开发工作也衍生出多种工作岗位，而我们作为 Web 前端开发者的其中一员，更应该感谢 Web 给我们带来的机遇和未来。从今天开始，我们来一起探讨 Web 开发中一小部分相关的技能（或者说知识），即 Web 布局 。
# Web 布局演变过程
多年以来，Web 布局已经改变了互联网。那么， Web 布局是从什么时候开始的，又是如何走到今天的呢？我们将深入研究 Web 布局的历史和演变，看看几十年来 Web 布局最佳实践是如何变化的。
Web 布局的历史关键点的可以通过《Web Design History Timeline (opens new window)》来了解！
自1991 年 Berners-Lee 创建出世界上首个 Web 页面到如今天，Web 布局主要可以分为六个关键点：
正如上图所示，每个关键点都有新的布局技术出现，也正因如此，Web 布局也随着技术的变革变得越来越灵活，越来越强大。其主要表现在，Web 布局的适配性更强、美感更强、用户体验更好等等。
除此之外，我们还可以换过一个角度来看。因为不同时代，Web布局（设计）有着自己不同的定义：
在 Web 布局（或者说 Web 设计）中，每个版本有着自己清晰的定义：
- Web 设计 1.0（Web Design 1.0）是“一维的 ”：设计元素大多是按顺序排列的（按文档流的自然顺序排列） ；
- Web 设计 2.0（Web Design 2.0）是“二维的 ”：单元格中有放置元素的网格，具有更多的自由性 ；
- Web 设计 3.0（Web Design 3.0）是一个“新的维度 ”：它可以像平面设计工具一样，自由地定位元素、重叠，为网页设计开辟了新的前景，也将开启新的 Web 页面设计时代 。
注意，这里所说的“二维”布局仅是坐标轴上来描述的，它和后面要介绍的 CSS Grid 布局中提到的二维布局概念是不一样的！到目前为止，只有 CSS Grid 布局才是二维布局！
刚才我们也提到过了，Web 布局的演进有六个关键点，这样划分是因为，在这个时候有新的 Web 布局技术出现，使用不同的布局技术，对 Web 布局也有着不同的称谓。
有了这个基础，接下来我们将围绕着 Web 布局这六个关键点来展开。和大家一起探讨每个关键点中采用的主流 Web 布局技术。
# 无任何布局模式
互联网上的第一个网站是由 Tim Berners-Lee 创建的，他在瑞士研究中心 CERN (opens new window)（欧洲核研究组织）设计了该网站 (opens new window)。
Tim Berners-Lee 不仅被誉为第一位 Web 设计师，他还创建了超文本标记语言 (HTML 规范)，并使用该语言对 CERN 网站进行了编码。他还编写了第一个 Web 服务器规范 (HTTP) 和 Web 浏览器。他将继续创建万维网联盟 (opens new window)，该联盟至今仍负责监督 Web 标准的开发。
Tim Berners-Lee 对漂亮的格式不太感兴趣。出于这个原因，HTML 的原始规范不包含任何真正能够准确控制页面布局的能力。
也就是说，在早期的 Web 设计时代，Web 页面上的信息（元素）通常按照正常的流顺序（出现在 HTML 文档的源顺序）来组织。它没有色块、没有图像、没有图形，只有文字。与我们今天所认为的“网页设计”相去甚远。
这个阶段（大约1991年~1994年）没有任何 Web 技术可言，他仅仅依靠 HTML 文档的顺序来组织和展示 Web 页面信息 ！
在这个阶段只有 展示性的 HTML 标签 和 单像素的 GIF 技巧 。
# 展示性的 HTML 标签
早期的 HTML 规范仅提供了 18 个 HTML 标签的描述：<title>, <nextid>, <a>, <isindex>, <plaintext>, <listing>, <p>, <h1>～<h6>, <address>, <hp1>, <hp2>, <dl>, <dt>, <dd>, <ul>, <li>,<menu>和<dir>。
在这同一时间，主流浏览器制造商（Netscape 和 Microsoft）添加一些标签，允许 Web 开发人员使用一些具有“展示性”的 HTML 标签来控制页面外观，例如粗体的<b>和斜体的<i>。有些标签还允许更改字号<font size="+2">、设置字体<font face="verdana">以及文本颜色<font color="red">和背景颜色<body bgcolor="blue">。甚至某种程度的图像对齐也可以通过<img>标签的属性来完成，例如<img src="logo.gif" align="center" />。
只不过，这种方式很快成为 Web 开发人员维护页面的一个巨大问题，必须在站点的多个页面上的多个实例中进行更改。此外，Web 的创始人，例如 Tim Berners-Lee，曾设想 HTML 仅用于定义文档的结构，而不是用于控制展示。
注意，
<img>标签大约在 1995 年才进入 HTML 规范的！
# 单一像素的 GIF 技巧
虽然首个 Web 页面仅仅是文本和超链接的展示，但在第二年（1992年）开始，图片就可以通过<img>标签在 Web 页面中呈现。下图是世界上首先被运用于 Web 页面的图片之一。
不过在当时，Web 开发者更喜欢使用单像素透明图片（GIF）来设置元素之间的间距。作为透明图像，该像素后面的任何内容，例如背景图像或颜色，都会显示出来。
单像素图像下载速度很快，因为它是不可见的（透明的），设计师可以通过添加间距属性（例如 <img src="smiley.gif" hspace="75" > 或width或height）来简单地改变水平和（或）垂直间距，例如 <img src="single.gif" width="150" > 以创建所需的任意数量的空白空间。
# 表格布局模式
互联网的发展是快速的，仅仅几年之后，HTML 2.0 （大约在 1995 年）就新增了图片 （<img>）、表单 （<form>）和 表格 （<table>）等标签。这为 Web 开发人员在页面组织方面提供了更多的创造性自由。
就在 HTML 2.0 表布之后的第二年（1996年），用于展示数据的表格就被用于 Web 的布局上，而且越来越受欢迎，也就在这个时候，表格布局模式 就随之开启了。
例如：
<table>
<tr>
<td colspan="2">顶栏</td>
</tr>
<tr>
<td>左列</td>
<td>右列</td>
</tr>
</table>
2
3
4
5
6
7
8
9
效果如下：
早期的 Netscape 站点就是使用表格进行布局的：
直到如今，在互联网上依旧能看到使用表格布局的 Web 页面！
尽管表格（<table>）的设计初衷是用于数据展示，而不是为 Web 布局而设计的，但表格在 2000 年代成为 Web 布局的“首选”方案。虽然使用表格来对 Web 布局，可以让 Web 页面以一定的结构性来呈现页面信息，但对于 Web 开发人员来说依旧是痛苦的，而且对于页面的性能也是致命的。
虽然表格布局有着天生的不足，但它对于 Web 的设计和开发的演变有着革命性的影响，它将彻底改变 Web 设计的历史！即有 Web 布局这样的一个概念！
大约在使用表格进行布局的同时，HTML 框架标签（<frameset>）的使用也很流行。使用<frameset>标签，HTML 文档可以指定页面区域，使用<frame src>标签可以包含其他 HTML 文件（.html）。框架集甚至可以嵌套以获得更好的控制。
下面的示例显示了五个单独的页面如何包含在主<frameset>标记中。
<frameset cols="30%,*">
<frameset rows="40%,*">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
<frameset rows="33%,33%,*">
<frame src="frame3.html">
<frame src="frame4.html">
<frame src="frame5.html">
</frameset>
</frameset>
2
3
4
5
6
7
8
9
10
11
大致效果如下：
当然，这个系统意味着开发人员必须为一个布局管理多个 HTML 文件。由于其他原因，框架也存在问题。比如页面添加书签效果不佳、页面超链接会令人常感到困惑，而且它们对搜索引擎也不友好。
随着设计和开发工具变得越来越复杂，Web 用户开始对他们的在线体验寄予更多的期望。因此，苹果公司（Apple）在其计算机系统会议上创造了 “用户体验” 一词。
在 90 年代末期，浏览器大战中的大玩家（网景和微软）聚在一起对 HTML 发起了一场新的变革，即 逐步淘汰（弃用）展示性的 HTML 标签 。同时，与 HTML 结构分离的级联样式表 概念随之到来，并且得到快速的推进。
1996 年，层叠样式表（CSS）面世，允许我们将 Web 页面的结构（HTML）和样式信息分开。样式规则可以保存在单独的文档（外部样式表，即.css文件）中，样式表（CSS）可以用来设置 HTML 标签元素的展示信息，比如颜色、布局和排版等。
HTML 和 CSS 是一组强大的组合，也将 Web 设计和开发推入到新的一个时代 。
与此同时，Web 动画紧随其后，Macromedia Flash 1.0 席卷了互联网。
但它并非没有缺点。动画只有在网站配备了 Flash 扩展插件时才能运行，否则动画会显示为空白。这给完全基于 Flash 构建的网站带来了严重的问题。此外，Web 动画的开发需要繁重的工作，而且页面加载速度较慢。
CSS 的诞生，让 Web 逐渐告别表格布局模式，开始迎来新的布局模式 ！
# 浮动、定位和框架布局模式
自 1996 年发布了第一个 CSS 建议 (opens new window) 之后，1998 年就发布了 CSS 第二版本（CSS 2.0），该版本提供了新的 Web 布局特性，比如定位（position ）。与此同时，随着 CSS 的到来，Web 页面才真正有了“美感”这么一说：
也是在这个时候（大约是 90 年代末、20 世纪初），表格布局开始用于其初衷（数据展示），随之在 Web 布局中涌现出很多新的布局模式。比如浮动布局 、定位布局 和 框架布局 等。
这里所说的框架布局是指 CSS Frameworks，而不是 HTML 中的框架标签！
# 浮动布局
浮动布局指的是使用 CSS 的浮动（float属性）特性来构建 Web 页面。它和 HTML 的表格（<table>）标签有点类似，它的初衷也不是用于 Web 布局的，是用来对 Web 进行排版的。即，用来处理文本围绕图片（或某个元素）的一种排版方式 ，就好比 Word 这样的排版软件中的排版方式，如下图所示：
只不过，广大的 CSSer 发挥其无穷的智慧，硬是将其用于 Web 的布局中，而且这种布局方式一度成为一种主流的布局方式，并且持续了很多年，甚至直到今天，还有不少的同学在使用浮动来布局。直到 Flexbox 布局的出现和移动端的兴起，浮动布局才慢慢的被其取替。
在 CSS 的布局模式当中，浮动布局经历的时期是最长的（至少到目前还没有什么方式超过它），持续了十多年的历史。在这个过程中，也积累了很多不同的布局方法。在早期，Web 开发人员主要采用 固定宽度 和 流式布局 两种布局方案来实现 Web 页面的布局。
在这个时期也演变出很多经典的布局。其中要属“圣杯 ”和“双飞翼 ”两者最为经典。这两种方法实现的都是以三列布局为主，而且两边的宽度是固定的，中间列是自适应，它们实现的效果是一样的，只是实现的思路不同。
# 定位布局
随着 CSS 的定位（position）属性的出现，Web 布局除了浮动布局之外，又新增了 定位布局 。这种方式的布局能让你快速达到想要的布局效果。当然也有很多同学直接尝试采用 PSD2HTML 这样的工具，直接将设计图转换成 Web 页面。虽然这种方式能快速实现 Web 布局的效果，但也受到很多的局限性：
- 需要明确指定元素的大小 ；
- 需要明确计算元素位置坐标 ；
- 难于维护 。
或许其中还有很多其他不利的因素。因此，这样的布局也不算是一种好的布局模式，但对于不太懂 CSS 的同学而言，这是一种简单易懂的布局。
早期使用 PSD2HTML 的工具或软件（比如 Photoshop 或者 Firework 制图软件的切处导出的页面），基本上采用的都是定位布局。如今也有很多类似的工具，比如一些 AI 智能还图的运用，从设计稿中导出来的 HTML 和 CSS，不全是采用的定位布局。
# 框架布局
这里所说的框架布局，指的是 CSS Frameworks（CSS 框架），比如 Bootstrap！
随着这么多年的发展，现在大量的 Web 设计都是基于网格布局。虽然人们通常注意不到它，但事实上杂乱无章的布局时代确实已经过去了，现在是整齐结构化的天下。无论从理论、美学和整齐来说，这样的布局都很好平衡。网格结构是所有现代网站的基础，它最终总能给用户完美无暇的设计。
对于网格系统，其也经历了一个漫长的演变。表格布局虽然痛苦，但可以说表格是网格系统布局的最初模型。
正因为有表格布局的存在，才有了后面的 CSS 网格系统，不管是早期基于浮动完成的网格系统，还是后期依赖于 Flexbox 完成的网格系统。当然，你可能会说，网格系统的鼻祖不是 960gs (opens new window)？
虽然 960gs 是最早出现的网格系统（基于浮动布局），但其网格的思路是来源于表格的。因为表格具有明显的栅格风格，只不过是使用其它的布局方式，快速模拟了表格的风格，甚至是嵌套表格的风格。加上网格系统让 Web 的设计变得结构整齐、布局平衡等，受到众多设计师的青眯，也让 Web 开发者更易实现，并且可以依据此思路制定一套系统。基于此系统，可以快速完成 Web 布局，并且达到较好的效果，甚至还可以基于此系统制作工具，通过工具帮助大家快速完成布局。
网格框架中的网格系统，依旧是使用浮动或者后面出现的 Flexbox 构建的布局系统，它和原生的 CSS Grid 模块有着本质的区别！
# 响应式 Web 布局（RWD）
直到 20 年代初，Web 网站都是为桌面浏览器创建的。虽然在这个阶段，Web 开发者会采用不同的布局技术，比如流式布局（也常称百分比布局 ）让 Web 页面适配浏览器不同尺寸，但还未进入真正的 响应式 Web 设计 时代。
哪怕是 Cameron Adams（@themaninblue） (opens new window) 在他的博文《Resolution dependent layout (opens new window)》提出了基于屏幕分辨率来动态构建 Web 布局 （ 使用 JavaScript 根据浏览器窗口大小加载不同 CSS 文件 ），也称不上是响应式 Web 布局。
虽然这种依赖动态分辨率布局的方案，可以在不同的分辨率下提供更佳的体验，但随着 2005 年 08 月 10 日 Opera 软件公司推出 Opera Mini ，和 2007 年 01 月 09 日第一台 iPhone 手机的出现，市场上不同品牌，不同分辨率的移动端以及品牌商自己的 Web 浏览器越来越多。
在这种环境之下，基于动态分辨率加载不同的样式表已不太现实，Web 开发者不得不想出其他的方案来适应不同的屏幕尺寸。
在很长一段时间，甚至到今日，为了适应不同屏幕的尺寸适配，为移动端单独创建一个网站，即 移动子域名网站。比如 Facebook 的桌面版本和移动端版本，采用两个不同的域名来访问：
如此一来，开发人员要开发两个版本，相应的工作量就更大了，特别对于要快速响应和试错的 Web 应用来说，难度变得更大。
Web 开发人员为了能改善这种现象，在 2010 年的时候，Ethan Marcotte（@beep） (opens new window) 基于 John Allsopp（@johnallsopp） (opens new window) 的 《网页设计的道（A Dao of Web Design） (opens new window)》，提出响应式 Web 设计思路（《Responsive Web Design (opens new window)》）。从此响应式 Web 设计 （Responsive Web Design，简称 RWD ）的身影就出现在了公众面前。
Ethan Marcotte（@beep） 在《Responsive Web Design (opens new window)》中提到：
响应式这个词源自于建筑学领域，原本指的是建筑物本身会“响应”实际的使用情况，来自我调整。在Web开发领域，“响应式”的意思就变成了，我们开发的 Web 页面会“响应”用户的设备尺寸而自动调整布局。在这篇文章中提到过，我们可以基于 流体网格（Fluid Grids）、灵活的图片（Flexible Images）和媒体查询（Media Queries） 三种技术来构建一个响应式 Web 网站或 Web 应用。
另外，Ethan Marcotte（@beep） 构建了第一个具有响应式的 Web 网页，可以说是响应式 Web 设计经典案例之一（只可惜现在打不开了）：
# 内在 Web 设计（IWD）
内在的 Web 设计这个概念，是在 2018 年由 Jen Simmons (opens new window) 提出的，这个概念是 Web 设计中的一个新概念！她在 2018 年的 An Event Apart 大会上分享了该话题 (opens new window)（该话题的 PPT请点击这里获取 (opens new window)），她分享时曾表示：
我们现在正处于 Web 设计发展的另一个转折点，创意比增长更重要。
Jen 说，“内在 Web 设计”（"Intrinsic Web Design"）可能是 Web 设计历史上的新关键点，一切都在改变，在以技术和经验为基础，希望以最少的代码量来实现复杂的 Web 设计，或者说，Web 开发者希望在用最少的代码和复杂 Web 设计之间取得完美的平衡 。她意识到，以“内在 Web 设计”将可以把这种平衡趋向于完美。那么什么是内在 Web 设计？
# 什么是内在 Web 设计？
自从 Web 诞生以来，Web 开发者一直在使用大量的技巧来完成所有与布局有关的事情。无论是使用浮动（float）还是引用外部第三方 CSS 框架（CSS Frameworks）和库（比如Bootstrap）将内容放置在 Web 页面上想要的任何位置（即布局），几乎都有一些 Hack 的身影存在！
浮动的初衷是用于排版的，只不过在那个年代，Web 开发者利用其特性来构建 Web 的布局，而且运用于 Web 布局很多年。其中大多数第三方的 CSS 框架和库都是采用浮动来完成 Web 的布局！
然而，像 Flexbox 和 Grid 这样的 CSS 模块的出现，使我们能够正确构建我们想要的 Web 布局（设计），而且没有任何 Hack 代码、第三方 CSS 框架或 JavaScript 脚本（指完成 Web 布局方面）。从本质上讲：
能够以最少的 Hack 和技巧构建任何你想要的 Web 布局（或设计）！
也就是说，与将设计人员和开发人员都限制在 Web 的“预定义规则”中不同，内在 Web 设计（Intrinsic Web Design）使他们能够灵活地将传统的、久经考验的 Web 布局技术和现代布局方法和工具（比如 Flexbox、Grid等）结合起来，以便根据 Web 的内在内容创造独特的布局。
鼓励设计人员和开发人员将内容放在首位，并允许他们利用所有可用的布局技术和方法，以最佳方式在 Web 页面上显示内容，同时保持代码干净和更高效。用最简单的术语来说：
内在 Web 设计（Intrinsic Web Design）不是内容以设计为导向（Content Design-Driven），而是只专注于让设计受内容驱动（Design Content-Driven）。
通俗地说，直到现在，大多数的 Web 设计和布局都是以设计为导向，因为在构建 Web 布局时，都是基于设计师提供的设计稿（模板）来完成。因此，你不难发现，现存于线上的很多 Web 页面上的元素大小（尺寸）基本上都设置了固定的尺寸，而且这些尺寸是根据最初设计师提供的稿子定义的。
事实上呢？Web 的数据是动态的，服务端吐出的数据与最初设计稿内容有可能并不匹配（有多，也有少），此时呈现给用户的 Web 页面并不是最佳的（有可能很多空白空间未利用，有可能内容溢出容器，打破布局）。反之，Web 的内在尺寸设计就不同，在 Web 布局时，页面元素大小是根据真实内容（服务端吐出的数据）来决定的。
内在 Web 设计是 Web 布局的新时代，* 它***超越了响应式设计。我们正在使用** Web 本身作为一种媒介（设计受内容驱动），而不是试图模拟印刷设计（内容以设计为导向）。内在 Web 设计更为重要的是，不仅上下文的流畅，适应性高，还能够在 Web 布局和当前的 CSS 功能集上发挥真正的创造力 。
# 组件驱动式 Web 设计（CDWD）
组件驱动式 Web 设计被称为下一代响应式 Web 设计!
Web 生态是不断向前发展的。在这十多年来，CSS 也发生了巨大的变化，新增了很多新的特性，近两年尤其如此。这些变化，对于响应式 Web 设计的开发也有较大的改变。就在2021 年 Google 的 I/O 大会上 (opens new window)，Una Kravets（@Una）提出新的响应式：组件驱动式 Web 设计（Component-Driven Web Design ，即 CDWD ）。
简单地说， 组件驱动 Web 设计（Component-Driven Web Design），基于组件驱动的开发，即 CSS 新增的特性将直接基于组件而不是基于页面注入样式响应能力 。用下图来简单概述组件驱动式 Web 设计：
简要地说，我们使用 CSS 新特性可以做到：
- 响应用户的需求；
- 响应容器的需求；
- 响应外形的需求。
而且我们不再仅限于基于媒体查询来构建页面级的布局，还可以基于容器查询构建组件组的布局。这对于以往的布局来说，是质的变化。
# 2022 年及以后 CSS 布局技术
自从第一张 Web 页面诞生至今，Web 的布局已经经过了多次迭代：无布局 » 表格布局 » 浮动布局 » 框架布局 » 现代布局 » 未来布局：
整个布局演变过程中，有不同的名词来定义布局（一般根据采用的布局技术来命名）：
其中浮动布局（主要是 CSS 的 float 属性）技术曾也占据较长时间，在当初那个年代可以说是主流的布局技术，直到 Flexbox 的出现以及浏览器对 Flexbox 越来越完善时，浮动布局技术才被 Flexbox 布局技术替代下来。
虽然时下 Flexbox 布局技术是一个主流布局技术，但并不代表着 CSS 的浮动（float）就没有存在的必要了（有些布局效果还是离不开浮动的，比如不规则布局）。
随着 CSS 技术不断向前发展，尤其是这几年，可以用 Web 布局的特性明显增多：
正如上图所示，其中多列布局（Multi-column）和 Flexbox 已经是很成熟的技术，只不过多列布局（Multi-column）使用的较少，对于像 CSS 自定义属性、CSS 网格（它也很早就有了）、宽高比（aspect-ratio）、CSS 比较函数（min()、max() 和 clamp()）、CSS 逻辑属性、CSS书写模式 和 CSS 视窗单位，是近两年才得到主流浏览器支持，其他很多特性对于 Web 开发者来说是“只闻其名，未见其身”。
换句话来说，时至今日，这些特性都可以用于 Web 布局当中，它们都是 Web 布局工具箱中的一员。在未来，我们还可以使用像子网格（subgrid）、容器查询 和 父选择器 :has() 等特性（这三个特性，已经得到部分主流浏览器的支持）。
如果你有关注过CSS相关的发展报告的话 (opens new window)，你可能也知道，这几个 CSS 特性一直以来也是 CSSer 最为期待的三个特性，尤其是容器查询和父选择器：
也就是说，这些 CSS 特性已成为时下，或将成为 Web 布局的主流技术。
# 小结
历史是不断向前的，技术也是如此。虽然 CSS 在众多同学眼里是一件轻松的事情，但事实并非如此。正如此文所介绍的 CSS 实现 Web 布局，这就不是一件轻松的事情，很多工作两、三年的同学，都不一定能对 Web 布局实现达到手到擒来。
除此之外，在未来，Web 布局的模式将会越来越多，越来越强大，比如不久的将来，CSS Shapes 能帮助我们打破矩形的布局模式，CSS 的多列布局能让我们在 Web 中实现报纸排版的效果。或许还将会有其它的布局模式。
如果想彻底掌握上面提到这些布局模式，那么你需要对 CSS 有一定的基础了解。有了这些相关的基础，你会更好理解其中的一些概念和相关理论。如果你是初次接触 CSS，或者说对 CSS 了解还不足够深，那也无妨，因为我们接下来的内容将会带领大家一起来探讨现代 Web 布局技术。比如 Flexbox、Grid、容器查询等！