Page loading

loading icon

前端布局的过去与将来

css

层叠样式表 (Cascading Style Sheets,常缩写记作 CSS), 是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染,如何更高效的向用户展示信息,使用户找到自己需要的信息、区分信息层次关系。
其中布局显得尤为重要。css布局大致分为4个阶段:table布局->div布局->flex布局->grid布局,下面时间我一一介绍。

table布局

table布局为最早出现的布局,使用table、th、tr、td、thead、tbody、tfoot等标签来划分页面内容展示和层级关系。,其优点是学起来简单,缺点是布局麻烦,有时候为了布局需要添加很多无用的标签,灵活性差,通常都是固定尺寸,屏幕尺寸一变化就会变形;复用性也差,移植到其它页面大部分都需要重写。在互联网初期,主要是做软件,table布局也应付的来。

div布局


由于table布局的局限性,互联网的大咖们努力寻找可以取代的布局方式,div布局登场了。div布局主要用div、span标签等加上ccs的float浮动、position定位等方法布局,特点是灵活性强,复用性好,有很多著名的css框架就是这时候出现的,比如雅虎的yui。直到现在,div布局一直也是网页布局的主要方式。

flex布局

智能手机的出现让移动互联网爆发,以移动端网页的布局方式也发生了改变。这里不得不提不同时代的互联网霸主,pc时代是微软的天下,浏览器ie占据90%+的市场,微软的标准成了事实标准,标准委员会根本没地位;
2008年iphone的出现,IT缺口以移动端为主要,这时候苹果和谷歌成了霸主,两家主推她们的webkit内核浏览器,用户和开发者逐渐的不在理会ie,使用布局方式更好的flex模式;不过由于pc端布局的开发者保有量大,div布局还是会大量存在。

grid布局

grid布局为下一代css布局标准,标准委员会正在制定中,grid布局并没有带来多少惊喜,只是提高了开发人员的效率,有很多框架封装好以后,就类似与grid布局,比如bootstrap布局系统,移动端的原生布局,react-native的grid布局模块。
总之,前端布局的演变重学起来容易,用起来麻烦,到学起来难一点,用起来容易的状态演变,从计算机的思维方式到人类的思维方式演变。
总之,未来不需要苦力,需要的是思想。