【第1850期】网页布局简史
前言
你经历了哪些布局方式？今日早读文章由@五两饭笨笨翻译分享。
正文从这开始～～
万维网（HTML和HTTP）的发明是Tim Berners-Lee的功劳。然而，Berners-Lee不是个设计师，他当时在位于瑞士日内瓦的欧洲核子研究组织（CERN）工作，是一名工程师、计算机科学家。他想开发一个能够在同事之间方便地分享研究成果的系统。研究成果往往是文字、图表、图片等多种形式，但当时并没有什么好办法来分享这些东西。毕竟，那时的互联网基本还只有文字。
1989年，Berners-Lee提出了一个基于互联网的超文本/超媒体系统。到了1990年，他又提出了第一份HTML规范。此外，他还编写了第一份web服务器规范（HTTP）和浏览器。
不过，Berners-Lee对排版兴趣不大。因此，HTML最初的规范当中没有包含任何有关精确调整页面布局的内容。
这个链接包含了一个早期（1992年）的网页：http://info.cern.ch/hypertext/WWW/ TheProject.html
用于展示的HTML标签
1990年代中期，主流浏览器厂商（网景和微软）添加了一些标签（tag），从而使得设计者可以用“展示类”的标签来控制页面的外观，例如 <b>让文字成为粗体， <i>则是斜体。还有一些其他标签，包括改变字号（如 <fontsize="+2">）、改变字体（如 <fontface="verdana">）、改变元素颜色（如 <fontcolor="blue">和 <bodybgcolor="#e6e6fa">，甚至连图片对齐都能一定程度上利用标签的属性进行调整（如 <imgsrc="smiley.gif"align="left">）。
然而，从web开发者进行网页维护的角度来看，用HTML直接控制页面布局很快就暴露出了巨大的问题。每当需要改动时，就必须在多个网页、多个位置进行修改。此外，Tim Berners-Lee等web的创始人们最初的计划中，HTML也是用来定义文章结构的，而非外观展示。
单像素GIF
当时很流行的一个hack就是利用单像素透明图片（gif）来控制元素间隔。由于图片是透明的，所有被这个像素覆盖的东西（如背景图片或颜色）都可以显示出来。
单像素图片下载很快。设计者可以通过添加间隔属性（如 <imgsrc="smiley.gif"hspace=75">）或宽高属性（如 <imgsrc="single.gif"width="150">）来直接改变水平和竖直间隔。这在当时常常被用来手工制造空白，或者在段落开头生成缩紧。
例子（译者注：无法正常显示）：这里的空白...
...是用宽度为150px的单像素图片创建的。
表格布局
展示标签和单像素图片的用法终究都还比较局限。后来人们发现，对于页面布局来说，表格是一个有力的工具。到了1996年，表格布局流行了起来。最初的HTML规范当中，表格的初衷其实是用来组织表状（以行列划分）数据的，但很快大家就意识到，单元格里面可以放各种HTML元素，于是整个表格就成了一个二维的页面布局。
下图的代码展示了一个简单的表格布局。不难设想，顶行可以是页眉，左边栏是导航区，页面的主要内容则是在右边。
Netscape网站早期也使用了表格布局。
尽管不是为了布局而设计的，但是直到2000年，表格才成为布局页面内容的“转到”方法。就像上面概述的表示性标记的使用一样，使用 HTML 表格来控制表示，打破了仅用于描述页面结构的 HTML 的基本原理。编辑页面既麻烦又困难。
帧（Frames）
在表格布局大行其道的同一时间，在HTML里分帧布局也很流行。通过使用 <frameset>和 <framesrc>标签，一个HTML页面中的一些区域可以包含另外的HTML文件。帧甚至还可以嵌套使用。下图展示了如何用 <frameset>在一个页面中包含5个不同的页面。
显然，这种方式意味着对于同一个页面布局，开发者需要同时维护多个文件。帧也还有其他问题：有帧的页面不方便收藏，给别人发链接的时候不知道该发哪个，对搜索引擎的检索很不友好，等等。此外，跟表格布局类似，用分帧布局和web将结构与展示相分离的初衷也是背道而驰的。
客户端分区响应图（Image Map）
客户端分区响应图是一种特殊的图片，面积往往比较大，上面有一些区域可以直接点击（即所谓的热点），链接到其他页面。图像设计师很喜欢分区响应图，因为他们可以在Photoshop中设计好非常复杂的图片拿到浏览器中使用，视觉上仍然一模一样。分区响应图中的热点区域是用HTML代码实现的，一般是矩形、圆形、或多边形的坐标。
下图的例子中，一个矩形（旗子）、一个圆形（球）、以及一个多边形（房子）分别被设置为了热点区域。这些热点区域可以通过类似下面的代码链接到其他页面。
坐标计算以左上角为原点，单位是像素。所以，矩形区域参数中前两个数是76和99，代表矩形区域的左上角距离图片左边界76像素，上边界99像素。后两个数（180和156）代表矩形右下角的坐标，即距离图片左边界180像素，上边界156像素。圆形坐标的前两个数代表圆心（310，239），然后是半径（41）。多边形坐标由数对组成，每一对都代表一个点。
使用分区响应图就不需要再考虑页面布局的事了，整个页面就是一张大的图片。不过，这也意味着下载时间变长、修改起来非常麻烦。另外，跟表格和分帧布局类似，这也违反了web将内容和展示分开的目标。
CASCADING STYLE SHEETS（层叠样式表）
1990年代末的一波进展终于让HTML不再那么混乱了。浏览器战争中的对手们（网景和微软）达成了共识，决定逐渐淘汰展示类标签。与此同时，CSS（Cascading Style Sheet）的广泛使用大大促进了结构和展示的分离。
CSS使得样式信息可以独立于页面结构（HTML），保存在一个单独的文件中。对样式的改动则可以影响网站中多个甚至所有页面的外观。有需要的话，针对单个页面，这些样式又可以通过内部样式（在中的样式）和内联样式（在HTML标签中）被覆盖。
W3C于1996年发布了第一版CSS推荐标准（见https://www.w3.org/TR/REC-CSS1/）。更新后的CSS Level 2发布于1998年，支持了一些新的页面布局技术，例如固定位置（position: fixed）、绝对位置（position: absolute）、相对位置（position: relative）、z-index等。然而，CSS的普及很缓慢。直到世纪之交，才有浏览器完整地支持了CSS。
1999年，CSS 3的草稿也发布了。与CSS 1和CSS 2不同，CSS 3不是一个大规范，而是分成了若干个独立的模块。每个模块各自定义了一些可以单独发布和更新的特性。CSS 3是目前最新的CSS规范，而且还在持续不断更新，其中包含了类似Flexbox和Grid之类的新布局工具。
DIV和“盒模型”
<div>元素起初是作为CSS的一部分被发明的，用来把页面组织成逻辑上独立的几个部分。它的设计初衷其实是替代当时最常用的表格布局。<div>标签内可以包含文字和图片，（从而形成“盒子”）。这些“盒子”可以设置宽度和/或长度，甚至还能有外边距（margin）和内边距（padding）。
CSS 定位（Position）属性
<div>默认是块级元素，如果不专门设置的话，多个 <div>会一个个地上下层叠排列。而最早能够专门设置元素对齐的就是定位属性（即position:fixed）。定位属性至今仍然是CSS规范的一部分，而且非常常用。定位属性可以有5个不同的值：
static
relative
fixed
absolute
sticky
position: static就是把元素仍然放在默认的位置。position: relative是相对于默认位置来定位。position: fixed是相对于可视区域（浏览器窗口）来定位，也就是说即便滑动了滚动条，元素仍然在原来的位置。position: absolute是相对于最近的非static祖先元素来定位。position: sticky则是根据滚动条的位置定位。
有时候我们还希望元素重叠覆盖。z-index就是用来解决叠放顺序的。例如z-index:2的元素会覆盖在z-index:1的元素上面。
绝对（absolute）和相对（relative）对于局部对齐一些元素很有用，但对于设置整个页面的布局来说还是不太适合。
浮动布局
float浮动属性最早是为了实现图片的文字环绕效果，允许的值包括left、right、none、inherit，但最常用的是left和right。下图展示了浮动的设计意图：图中的图片被设置了float:left，于是向左浮动。
后来人们发现，浮动 <div>元素可以用来有效地控制页面上元素的位置。把 <div>设置成浮动会使得对应的盒子有一定的自适应效果，多个浮动元素一一排列，如果超出了容器元素宽度，一行放不下时还会自动换行。
从CSS早期以来，浮动布局一直都是最常用的定位方法。浮动技术可以让元素自动跑到其他元素旁的空白，并根据容器元素的大小进行调整。
浮动例子
下图是一个浮动的例子，容器元素是900px宽。容器内的所有盒子都设置成float: left。盒子1也是900px宽，所以占满了一行，盒子2只能从第二行开始。盒子2是200px宽，盒子3是400px，盒子4是300px，加起来又占满一行。盒子5放不下去了，于是换到了第三行，占200px。盒子6是700px宽，把第三行剩下的空间正好占满。
悬置浮动
浮动布局常见的一个问题就是悬置浮动。假设都向左漂，当某个盒子比它右边的盒子还高时，右边的盒子就可能被悬挂起来。在下图中，盒子5本应当换行排列，但是却被盒子3悬挂了起来。
清除浮动
解决悬挂浮动的办法是对被挂起来的元素设置清除浮动。对于上图的盒子5，我们需要添加clear: left或clear: both，它就会跑到下一行，从最左边开始排列了。
反复清除浮动是多年以来web开发者的标准做法，但其实很痛苦。开发者们一直在寻找更好的布局方法。
移动和响应式网站
2007年，iPhone上市了。到了2010年，智能手机在美国已经占有27%的市场份额。2016年，这个数字更是达到了80%。在年轻、富有的群体中，智能手机的普及率还要更高一些：在18-29岁的人群中，92%的人都拥有智能手机。今天，用智能手机浏览网页的人已经比用电脑的还多了。
在智能手机普及之前，设计网页时我们只需要考虑台式机显示器的分辨率。然而，移动设备改变了这一切。web开发者起初的办法是为他们的网站设计移动和台式两个版本，但同时维护两个网站显然非常困难。
现在的趋势是设计一个能够自适应设备屏幕大小的网站。响应式网页设计（Responsive Web Design）力求让页面在不同大小的屏幕上都能很好地渲染，提供友好易用的体验。
下图展示了网页需要如何在不同大小的屏幕上自动调整布局。
响应式网页设计依靠媒体查询（media query）来决定什么时候改变布局。媒体查询是用来确定设备分辨率的CSS代码。根据媒体查询结果，可以应用不同的CSS布局。在下面的例子当中，如果屏幕宽度不小于768px，header元素的文字就会以1.2em的字号来显示。
@media only screen and(min-width: 768px) {header {font-size: 1.2em;}}
CSS Grid尤其适合设计响应式网页。
CSS框架
随着对响应式网站需求的增长，页面布局的复杂性也与日俱增。这最终导致了一系列简化响应式网页设计的CSS框架诞生。
框架其实就是一些预先写好的CSS，使得web开发者可以直接使用这些CSS来轻松的设计网格布局。最广为流传的两个框架是Foundation和Bootstrap，另外还有为数众多的其他框架。
多数框架内部都采用了12栏布局系统。12栏使得开发者在一行中可以创建出多种类型的等宽栏。下图展示了利用12栏布局系统在创建的1、2、3、4、6、12个等宽栏。
除了12之外，其他任何数字都不能给出这么多的布局选择。另外，即便并不要求等宽，12栏布局也依然可以提供多样化的选择。
Bootstrap还提供了一系列其他组件，包括表单、按钮、导航、以及相关的JavaScript扩展。Bootstrap 3的布局系统是用浮动（float）实现的。Bootstrap 4则是用Flexbox。Bootstrap预先写好的CSS文件可以帮助开发者轻松地创建各种布局。
对于不同的屏幕大小，Bootstrap提供了四种（lg、md、sm、xs）宽度后缀。“lg”用于1170px的屏幕，“md”用于970px，“sm“用于750px，”xs“用于比750px小的屏幕。
举个例子，如果想让一个元素在台式机屏幕（1170px或更宽）上占据8栏、在移动设备上占据12栏的话，可以这么写：
<divclass="col-lg-8 col-xs-12">
Bootstrap的内置类已经预先写好了CSS样式，会自动地创建出对应的布局。你只需要设置HTML元素的类，剩下的Bootstrap都会自动处理。
下面是一个更贴近真实世界的例子和对应的代码。
Flexbox
Flexbox是一维的布局技术，用来在一个方向（行或列）上对元素进行布局。它的设计初衷就是为了解决定位布局和浮动布局的许多问题。Flexbox的第一版工作草案于2009年发布，又经历的一些改动，直到2013年才正式发布了工作草案。
圣杯布局
Flexbox（和CSS Grid）解决的问题之一就是圣杯布局。（对于传统的布局技术来说，这种布局简直就像寻找传说中的圣杯一样困难，因此而得名。）在同一行中创建出内容多少不一、但高度一样的几栏多年来一直在困扰着web开发者。使用原始的表格实现这种圣杯布局还简单些，但表格难以维护，语义上来说也不是用来布局的。在Flexbox技术之前，所有的解决方案，包括给div添加table-property属性、绝对定位、JavaScript辅助等等，都有各自的问题。
下图中，第二行共有三栏。中间一栏内容最多，因而占满了页眉页脚之间的所有空间。但第一和第三栏内容较少，想在不添加内容的前提下让他们也占满剩余空间就非常困难了。
下图中展示了传说中的圣杯布局——三栏都一样高。
Flexbox是一个巨大的进步，大大简化了对齐和居中，可以不依赖内容多少而直接创建出等高的列。
Flexbox是由flex容器组成的，容器内则是flex项。容器既可以沿水平方向（行）布局，也可以沿竖直防线（列）布局。所选择的布局方向（一般是行）被称为主轴（main axis），另外一个方向则叫做交叉轴或横轴（cross axis）。flex项沿主轴排布，填满可用空间。通过嵌套使用flex容器，还可以在竖直和水平方向同时控制对齐。不过Flexbox本质上还是一维的。
Flexbox是网页布局的有力工具。
CSS Grid
基于CSS来实现某种网格（grid）布局的想法已经存在多年了。CSS的两位联合发明人Bert Bos和Håkon Wium Lie都有相关的想法。
突破来自微软。一些微软员工一直在为他们的浏览器探索更好的布局工具，慢慢形成了一份提案。事实上，2011年的时候，微软发布的IE 10中甚至用-ms-的厂商前缀实现了一个grid布局草案。随后的2012年，他们将规范的草案提交给了W3C。微软还为他们的grid系统申请了一份专利，并通过了审批。在专利文档中，这项技术被称为基于样式法则的内容无关网格布局。
微软的实现发布之后，一些web设计者开始各种了尝试。其中的一个，Rachel Andrew，认为这种思路很有前途，于是开发了一些演示和范例，用来说明grid可以解决许多一直以来的布局难题。后来，一位Mozilla的设计者，Jen Simmons，创建了一个叫做Labs的网站，也来展示CSS Grid的强大。类似的努力推动了W3C开展进一步的工作，最终将CSS Grid发布为一个规范。第一份规范的网址是：https://www.w3.org/TR/css-grid-1
浏览器对于CSS Grid的支持在2017年向前进了一大步。Chrome、Firefox、Safari、Opera都在三月份发布了支持CSS Grid的版本，微软则在十月份发布了支持CSS Grid的Edge。如下图所示，通过caniuse.com可以查询到，现在所有的主流浏览器全都支持CSS Grid了。
CSS Grid是第一个基于网格的二维布局系统，可以同时处理行和列。它解决了过去的许多布局问题，还使一些想象中的设计成为现实。现在，我们再也不需要浮动、各种hack、甚至是框架了，CSS Grid才是网页布局的最强大工具。它终于来到了我们面前。The Story of CSS Grid, from Its CreatorsCSS Grid是第一个基于网格的二维布局系统，可以同时处理行和列。它解决了过去的许多布局问题，还使一些想象中的设计成为现实。现在，我们再也不需要浮动、各种hack、甚至是框架了，CSS Grid才是网页布局的最强大工具。它终于来到了我们面前。
关于本文 译者：@五两饭笨笨 译文：https://zhuanlan.zhihu.com/p/104927765 作者：@TIM BERNERS-LEE 原文：http://grid-layout.com/history.html
为你推荐
【第1644期】RGB、HSL、Hex网页色彩，看完这篇全懂了