未来简史内容

文/面包理想

转眼间已经是2018年了，前端行业已经走过了10多年的风风雨雨，网页的布局也从最原始的文档变成了辉煌的交互。当我看到第四代CSS布局技术的时候，我惊叹于互联网的飞速发展，但又不禁疑惑:从1.0到3.0的版本变化后，CSS将何去何从？

今天，我们将回顾CSS的简史和布局技术的四次转变。

1.1简史。半铸钢ˌ钢性铸铁(Cast Semi-Steel)

为什么我们需要回顾CSS的简史？

1.了解过去可以更好的预测未来。毕竟，日光之下无新事。

2.相比于预测未来，通过了解CSS的发展趋势，可以科学合理的判断CSS的发展，指导我们学习CSS的核心技术，让我们在有限的精力和时间内学习到正确的知识，学好它。

这是1989年的第一场雪，早于1988年。蒂姆·伯纳斯·李以超人的智慧和额头上无数根浓密的头发为代价发明了万维网。没有他，就没有我们今天的互联网相关工作，也就没有这个专栏的教程。请允许我代表前端致以崇高的敬意。先来看看大神的恩典。

对于互联网之父，我只想对他说一句话。有一种生发效果很好的洗发水。我一直在用它。你想试试吗？

互联网诞生后，最初的网页只是纯文本，但随着互联网的发展，大家意识到最初的网页版本根本没有提供一种装饰网页的方式。就像婴儿出生时不会穿着衣服一样。孩子大了，就不能裸奔了吗？这时候有两位大神提供了解决方案，裴雅恩威和安德里森。

裴元伟说，这个容易。我们可以给孩子穿尿布。

佩-魏源在1991年创立了中提琴的官方风格标准。虽然这个目标没有实现，但是他的风格语法确实为其他风格语法提供了一些启发。

安德里森说，那东西需要换多麻烦。让我给孩子画一套衣服。当然你要知道，裴雅雯魏的方案最后还是被采纳了，但是你看看安德森画的图有多乱。

与此同时，安德森在他的网景浏览器中做了不同的尝试。他没有创建单独的标记语言，而是采用了扩展HTML标签的方法，将非标准的HTML标签包含进来，达到了修饰网页的目的。可惜没多久网页就失去了所有的语义，看起来像下面这样混乱:

ltMULTICOL COLS="3" GUTTER="25 " > ltP gt ltFONT SIZE="4" COLOR="RED " >这将是一些分解成列的字体 lt/FONT gt； lt/P gt； lt/multi col gt；大家最终采用的语言是Hakon Wium在1994年10月提出的风格语法。它被称为样式级联表，简称CSS，但直到1996年，CSS才演变成我们所熟悉的样子。

html { margin-left:2cm；字体系列:“时代”，衬线；} h1 { font-size:24px；}然后在1998年5月，W3C发布了CSS2，紧接着一个让我们感到钻心疼痛的浏览器诞生了！没错，就是你讨厌的那个万能的IE6。2001年，微软发布了IE6，但搞笑的是，IE6最初的出现确实极大地推动了CSS的发展。那个时候，网页已经变得很接近现在了。

按常理，你肯定会想，我以后也知道。你就不用说了，然后CSS3.0，嗯，如果是我，我也这么想，但是国际友人的脑回路可能和我们不一样。其实CSS 3早在1999年就制定了，直到2011年6月7日，CSS3颜色模块才最终作为W3C推荐发布。这个故事告诉我们两件事:

1.w3c活了很久，甚至比很多读者都老。

2.不是官方版的CSS就可以放心使用。如果你等到那时才使用它，你的项目可能在开花前就枯萎了。

细心的读者可能会问，CSS3正式版什么时候发布？CSS4.0什么时候发布？

嗯，我只能告诉你，随园...而且不会有CSS4.0，也不会有CSS5.0。

我们来看看国际友人的脑回路:

简单来说，从CSS3开始，CSS规范被拆分成很多模块单独升级，或者新的需求被建立并标准化为一个新的模块。所以以后不会有CSS4和CSS5的所谓大版本号的变化，只是CSS的某个模块级别的过渡。

根据CSS工作组的说法，CSS历史上没有版本的概念，只有“级别”的概念。比如CSS3其实就是CSS三级，CSS2就是CSS二级，CSS一级当然就是CSS1。每一级都建立在前一级的基础上。

大家可能会说这个名字好乱。我只想告诉你这件事。就当CSS工作组是你女朋友吧。她开心就好。她说的是对的。她说的就是她说的...

至于我们，知道怎么用就好了。

CSS的好处是把结构和表达分开，可以更灵活的修饰网页，简单易学。我想在这里谈谈它的缺点。

1.CSS只有一个全局命名空，无法避免选择器冲突。

2.模块化做得不够好，导致嵌套和覆盖混乱，容易出现很多乱七八糟的样式。

所以现在CSS也在向“模块化和JS”发展

但是，客观来说，CSS的出现确实是互联网里程碑式的进步。

CSS实际上做了两件事:

1.如何布局

2.元素是如何表现的？

说白了就是两件事:一个房子是建成两室一厅还是三室两厅，另一件事就是精装修。

大家在这里会看到，如果把一个180平米的房子，在170平米的主卧里，分割成一个10平米的卫生间，那么无论你装修得多么精细，都不会是一个宜居的房间。所以布局在CSS中极其重要。和CSS发展简史类似，CSS布局也是经历了几代迭代才成为今天的样子。

接下来说一下CSS布局简史。

2.2简史。CSS布局

原始表格布局

1997年，大卫·西格尔改变了网络。他自己开发了一个网页布局技术，通过把html中的表格元素和gif图片拼接起来，创造了一个表格布局技术。从那以后，他变得像一头野兽。

优点:布局简单、快速、兼容性好。

缺点:改动不方便，需要重新调整，工作量大。

由于互联网网站的日益复杂，内容和业务的频繁更新，表格布局完全无法胜任，以至于表格布局的发明者们都说:

“我把炸酱和面条倒在一起，分不开。”

但这真的不是我编的。原文:

大卫·西格尔:“有人说我破坏了网络，我回答了他们，这是真的。我毁了这个网，因为我把巧克力和花生酱混合在一起，但再也分不开了。我犯了把结构和性能混为一谈的错误。”

然后第二代布局技术出现了，

CSS+div布局

CSS+div布局总结起来有三个优点，

1.省时，易学，易写代码，快速高效。

2.省事。如果业务逻辑发生变化，改起来特别方便快捷。

3.省钱，代码少，节省带宽，适合seo

基于这三年，不难看出CSS+div布局对人畜无害，人人喜爱，所以也就不难解释为什么它会作为目前主流的布局技术被广泛使用。当然，他也有缺点:

1.需要考虑平台兼容性，对制作人的技能要求更高。

2.移动端的布局有些不足，比如浮子内部元素中心的宽度和高度未知，纵横布局，响应式布局，略显繁琐。

基于此，第三代布局技术应运而生。

灵活布局

优势:

1.1的布局。CSS3可以简单、完整、响应性强地实现各种页面布局，无需使用其他框架。2.移动端的布局简直太友好了。缺点:

兼容性差。IE浏览器版本在9.0以上，基本都是10.0。对于其他浏览器来说，要求兼容编写的Flex布局正在成为移动终端上的主流布局技术，但它是单维布局。这个我会在专栏后面讲到，有时候会有些捉襟见肘，于是第四代布局技术出现了:

网格布局

目前大部分浏览器都不支持这项技术，但它代表了网络的发展。把你的注意力放在这里。在这里，我将重点介绍一下为什么可以称之为第四代网络布局技术。首先，我们要记住一点:

它不会取代第三代布局技术，而是颠覆和突破。看起来Flex远比div+CSS布局方便，但div+CSS还是有它的用武之地。

先说它的突破:

1.flex的目标是float，本质上是一维布局。这和别人开着李霞，你开着奔驰在地上跑是一样的。但是电网已经升级了。网格是一架飞机。地面上道路上方的一个维度使人们能够思考高度的维度。以前是一维的交通工具(只能横向一个方向行驶)，飞机是二维的(可以(横向和纵向同时)俯冲)，所以grid可以说是拓宽了CSS布局的维度。不排除未来会有立体布局。那时候CSS不仅可以控制横向布局、纵向布局，还可以控制深度布局(这个要看三维显示的出现，比如VR、AR三维显示设备)。

2 .网格布局采用“可视化布局(模板部分，所见即所得)”，颠覆了传统的写个代码刷浏览器的开发模式，不排除未来会出现代码即效果的开发模式。例如，您在设备上绘制一个区域，然后绘制一个旋转木马。

这种方法类似于vc++的控制方法，但是更加智能和友好。谁说不可能？别忘了，网格布局的源头是早已废弃的表格布局。在这里，我想再说一件关于微软的趣事。frontpage没火，dreamwaver火了，最早提出“画布”概念的VML火了。最后html5的canvas火了，连CSS3网格布局都是微软创造的模块。最后，当它着火的时候，没有人知道它。微软心疼一秒。

在这里，我们都知道CSS的简史和布局。让我们总结一下，你应该从这篇文章中学习:

(一)1)CSS的发展历史。

(2)熟悉布局的发展历史，从而对布局技术的未来发展有一个客观的判断，选择是否学习。

通过本文的学习，我们已经了解了一些关于CSS的基础知识，接下来才会真正开始学习技术。你不能等等吗？