布局演变

第一阶段

      现在已经很少有人提及，其实最早的页面布局是使用table布局的，那时候的网页设计师基本不会担心跑位的问题，但是随着网页的功能越来越复杂，CSS的表现力越来越强，对HTML文档的语义化要求和页面加载速度的要求越来越高，基本上已经没有前端再用table布局（不是说在网页中不适用table标签）。

 

第二阶段

      在之后网页设计师采用一种叫div+css的布局方式，之所以这么命名，是因为那时候的HTML版本中div做为块级元素使用的非常频繁，为了区别于table布局方式，并指代结构与表现分离，就有了这样一个名字。由于当时的网页主要用于PC端，所谓div+css布局狭义的讲其实就是我们后面将提到的静态布局。

 

静态布局：

1、页面不会因为浏览器窗口的大小不同而不同，考虑目前主流电脑分辨率的宽度，UI的设计稿主体部分通常在1200像素以内，如果网页主体高于客户端分辨率，在浏览器中会出现横向滚动条，而不是缩小页面各元素。

2、页面元素的尺寸通常使用的px作为单位。

3、在浏览器窗口中观察,通常居中对齐显示，两侧留白。

 

显而易见使用静态布局不能根据用户的屏幕尺寸做出不同的表现。对于大的屏幕浪费了屏幕空间，小的屏幕可能出现横向滚动条。

为了应对不同尺寸的PC屏幕，于是出现了流式布局方式。

 

流式布局（Liquid Layout）

      页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

 

      这种布局方式宽度使用百分比定义，但是高度和文字大小等大都是用px来固定，所以这种布局方式在之后的移动端页面大行其道时，应用的十分不理想。在不同的手机视窗中宽度都可以拉到100%，但是高度、文字大小却不变，用户体验非常不好。

 

第三阶段

      随着智能手机的流行，使浏览器能够在手机上运行，于是就有了移动端的网页：

自适应布局（Adaptive Layout）

      自适应布局的特点是分别为不同的屏幕分辨率分别布局，也就是创建多个布局，每个布局对应一个屏幕分辨率范围。

响应式布局（Responsive Layout）

可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机）都能显示出令人满意的效果，搭配媒体查询技术分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。

即：创建多个流体式布局，分别对应一个屏幕分辨率范围。

rem布局

或许rem布局不应该称其为布局方式，实际上页面布局中rem结合其他布局方式来实现实现等比例适配所有屏幕。

rem和em都是网页中的相对单位，在现在的移动端布局中rem非常重要。通过将页面元素的尺寸设置为rem相对尺寸。

第四阶段

Flex弹性布局

采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为flex项目。弹性布局的主要思想是flex项目有能力来改变自身的宽度和高度，以填满flex容器的能力。Flex 布局通过设置主轴方向，可以实现页面元素的从上到下、从下到上、从左到右、从右到左的布局。Flex 布局能够轻松解决困扰前端的垂直对齐的问题。

Grid 布局

网格布局（Grid）是最强大的 CSS 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。