继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Flexbox深入浅出系列之布局演变史(3)

King
关注TA
已关注
手记 19
粉丝 3844
获赞 1230
布局演变史

同样的在整个WEB不断演进的过程中,WEB布局也经历了这几个阶段:表格布局、浮动布局、定位布局、Flexbox布局等。未来还会有像Grid网格布局这样的新型产物,那其实每种布局的出现再当时都很有意义。接着我们看下每种布局。


表格布局

历史上最早的一个网页是在1990年12月20日,由欧洲核子研究组织(CERN)的科学家蒂姆.伯纳斯.李在瑞士的研究中心创建的,最初仅为CERN内部的科学家所使用。直到1991年8月份才对外开放。传说中这个页面长得像下面这样的截图:

其实最早的时候我们介绍过,网页就只有文字信息和图片组成。为了让页面好看一些,在当时最主要的还是依赖于HTML中的table来实现的。在那时候编辑网页用的最多的就是DW、FrontPage这样的IDE,可以拖拽实现一个网页的布局。


定位布局

随着网页的发展,越来越复杂,HTML和CSS也出现的更多的标签和属性,通过Table布局已经满足不了我们的需求。这时候出现了一种布局,就是定位布局,在早期的网页设计经常就使用css中的position属性实现定位布局。使用这种布局可以完成一些复杂网页的布局,但是这种形式也有一些局限性:像需要计算元素的位置,很难维护。但是这种形式现在依然也被很多前端工程师所使用来布局。


浮动布局

那其实浮动的出现初衷不是为了解决布局的,而是用来处理文本的一种排版方式的。但是我们CSSer的智慧是无限的,他们将其应用于WEB布局中,而且这种方式一度成为主流的布局方式,虽说使用浮动布局的时候会产生种种问题,但是大家还是乐此不疲,直到我们要介绍的这个Flexbox出现,浮动才慢慢被取代。


Flexbox布局

Flexbox是CSS3中的一个新特性,这个特性解决我们以前在CSS中遇到的很多棘手的问题,像内容的伸缩与扩展、垂直居中问题、等分等。当然这个属性也大量的运用于布局当中,特别是在对移动优先的时代下,各种终端频频出现。

打开App,阅读手记
13人推荐
发表评论
随时随地看视频慕课网APP