# 布局演变史 同样的在整个WEB不断演进的过程中,WEB布局也经历了这几个阶段:表格布局、浮动布局、定位布局、Flexbox布局等。未来还会有像Grid网格布局这样的新型产物,那其实每种布局的出现再当时都很有意义。接着我们看下每种布局。 ## 表格布局 历史上最早的一个网页是在1990年12月20日,由欧洲核子研究组织(CERN)的科学家蒂姆.伯纳斯.李在瑞士的研究中心创建的,最初仅为CERN内部的科学家所使用。直到1991年8月份才对外开放。传说中这个页面长得像下面这样的截图: ![](https://box.kancloud.cn/2f9d220842947645bca35fc74c3936e8_500x336.png) 其实最早的时候我们介绍过,网页就只有文字信息和图片组成。为了让页面好看一些,在当时最主要的还是依赖于HTML中的table来实现的。在那时候编辑网页用的最多的就是DW、FrontPage这样的IDE,可以拖拽实现一个网页的布局。 ![](https://box.kancloud.cn/5ca573bdf653d6c5e056a8f1e5f401a6_1085x809.png) ## 定位布局 随着网页的发展,越来越复杂,HTML和CSS也出现的更多的标签和属性,通过Table布局已经满足不了我们的需求。这时候出现了一种布局,就是定位布局,在早期的网页设计经常就使用css中的position属性实现定位布局。使用这种布局可以完成一些复杂网页的布局,但是这种形式也有一些局限性:像需要计算元素的位置,很难维护。但是这种形式现在依然也被很多前端工程师所使用来布局。 ## 浮动布局 那其实浮动的出现初衷不是为了解决布局的,而是用来处理文本的一种排版方式的。但是我们CSSer的智慧是无限的,他们将其应用于WEB布局中,而且这种方式一度成为主流的布局方式,虽说使用浮动布局的时候会产生种种问题,但是大家还是乐此不疲,直到我们要介绍的这个Flexbox出现,浮动才慢慢被取代。 ## Flexbox布局 Flexbox是CSS3中的一个新特性,这个特性解决我们以前在CSS中遇到的很多棘手的问题,像内容的伸缩与扩展、垂直居中问题、等分等。当然这个属性也大量的运用于布局当中,特别是在对移动优先的时代下,各种终端频频出现。