2.18 前端页面布局方式的演变

第一阶段

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

第二阶段

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

静态布局：

1、页面不会因为浏览器窗口的大小不同而不同，考虑目前主流电脑分辨率的宽度，UI的设计稿主体部分通常在1200像素以内，如果网页主体高于客户端分辨率，在浏览器中会出现横向滚动条，而不是缩小页面各元素。
2、页面元素的尺寸通常使用的px作为单位。
3、在浏览器窗口中观察,通常居中对齐显示，两侧留白。

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

流式布局（Liquid Layout）

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

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

第三阶段

      随着智能手机的流行，使浏览器能够在手机上运行，于是就有了移动端的网页，一个普通的静态布局网页在手机浏览器中是这个样子的：

这样显然不利于阅读，有了需求自然就有改变，在CSS3中新增了媒体属性和使用场景，其实在CSS2中媒体查询使用于