网页布局的发展历程
这篇文章是网页布局的发展历程，主要包括表格布局、position 布局、浮动布局、栅栏布局、flex 布局和 grid 布局。
HTML 最初是用来定义网页结构的，页面内容从上到下依次显示，后来为了让页面可以有更多的样式，html 添加了改变元素样式的标签，比如 b 标签可以加粗、i 标签可以将文字改为斜体，但随着页面内容的丰富，页面如何布局成为了问题。
表格布局
后来人们发现，对于页面布局来说，表格是一个有力的工具。到了1996年，表格布局流行了起来。最初的 HTML 规范当中，表格的初衷其实是用来组织表状（以行列划分）数据的，但很快大家就意识到，单元格里面可以放各种 HTML 元素，于是整个表格就成了一个二维的页面布局。
在1997年的时候，David Siegel 研究出了表格布局技术，尽管表格本身是用来承载数据的，用来承载内容和图片有点奇怪，但是在那个时代，这种方法依然显得颇为靠谱，并且大行其道。
表格布局的优点是：布局容易、快捷、兼容性好。比如垂直对齐，以像素为单位或者以百分比来控制对齐。在那个时代，表格可是灵活的设计神器。但也存在明显的缺点：比如改动不便，需要重新调整，工作量大。
position定位
1990年代末浏览器厂商们达成了共识，决定逐渐淘汰展示类标签。同时，CSS（Cascading Style Sheet）的广泛使用大大促进了结构和展示的分离。
1998年发布的 CSS2，支持了一些新的页面布局技术，例如 position、z-index 等。position 属性有5个值：
static 是默认属性，元素使用正常的布局行为，此时 top, right, bottom, left 和 z-index 属性无效。
relative 是相对定位，此时元素放置在未添加定位时的位置，可以使用 top, right, bottom, left 调整元素位置，会在此元素未添加定位时所在位置留下空白。
absolute 是绝对定位，元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed 元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。
sticky 粘性定位，可以看作是 position:relative 和 position:fixed 的结合体——当元素在屏幕内，表现为 relative，就要滚出显示器屏幕的时候，表现为 fixed。sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden, scroll, auto, 或 overlay 时），没有就是 viewport。
Position 对于局部对齐一些元素很有用，但对于设置整个页面的布局来说还是不太适合。
浮动布局
Float 浮动属性最早是为了实现图片的文字环绕效果，后来人们发现，浮动元素可以用来有效地控制页面上元素的位置。把div设置成浮动会使得对应的盒子有一定的自适应效果，多个浮动元素一一排列，如果超出了容器元素宽度，一行放不下时还会自动换行。
浮动布局的优点也很明显：写代码也很容易，代码量少，效率高；如果业务逻辑变了，改起来特别方便快捷。但是浮动布局对制作人员的技能要求较高；在移动端布局显得有些力不从心，例如未知宽高的 float 内部元素居中、垂直水平布局、响应式布局等方面略显繁琐。
浮动的元素会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。浮动元素会影响后面的元素布局，所以需要经常清除浮动。
栅栏布局
反复清除浮动让开发者们十分痛苦，而且智能手机的兴起给网页布局带来了全新的挑战。设计师要为不同设备设计不同的布局。
第一个重大的改进是栅格系统的出现。经过摸索，960栅格系统最终胜出，经典的12栏栅格被设计师们广泛的接纳。各种常见的设计元素诸如表格、导航、按钮被封装成为可复用的组件。其中最典型的代表就是 Bootstrap。
对于不同的屏幕大小，Bootstrap 提供了四种（lg、md、sm、xs）宽度后缀。“lg”用于1170px的屏幕，“md”用于970px，“sm“用于750px，”xs“用于比750px小的屏幕。
Flexbox
基于盒状模型的布局方法，无论是 display、position 还是 float，特殊布局非常不方便，比如，垂直水平居中，这也是面试常问的问题。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。它的设计初衷就是为了解决定位布局和浮动布局的许多问题。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。注意，设为 Flex 布局以后，子元素的float、clear 和 vertical-align属性将失效。
采用 Flex 布局的元素，简称"容器（container）"。它的所有子元素称为，简称"项目（item）"。
容器默认存在两根轴：水平的主轴和垂直的交叉轴。可以分别设置他们的开始位置、结束位置、排列方向、对齐方式等等。
Flex 布局在现在的编程中已经成为了常用布局方式，本质上是一维的。
CSS Grid
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。现在所有的主流浏览器也已经全都支持 CSS Grid 了。
Grid 是第一个基于网格的二维布局系统，比如 n 行 m 列的网格中就存在 n*m 个单元格，CSS 可以分别处理每一个单元格和每一行、每一列的大小、排列方式、对齐方式等。
Grid布局就是之前 table 布局的 CSS 版本，在一些类似表格布局的地方会比 Flex 布局更为方便。
参考 https://www.uisdc.com/brief-history-of-web-design https://zhuanlan.zhihu.com/p/104927765 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position https://v3.bootcss.com/css/#grid http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html