css 过去及未来展望—分析 css 演进及排版布局的考量
读初二的时候，学校有了计算机，也简单地介绍了下网页，不过那是的 html 都是 table，也没有去细看。到了高中，qq 空间有个 html 模式，为了让文章好看点。也浅尝辄止地学了下 css
css 简介
在 HTML 迅猛发展的 90 年代，不同的浏览器根据自身的 HTML 语法结构来支持实现不同的样式语言。在最初的 HTML 版本中，由于只含有很少的显示属性，所以用户可以自己决定显示页面的方式。
但随着 HTML 的发展，HTML 增加了很多功能，代码也越来越臃肿，HTML 就变得越来越乱。网页也失去了语义化，维护代码很艰难，因为代码很混乱：比如现在博客园里面还有大量的<font color="blue" face="verdana"><body bgcolor="#e6e6fa">标签等。于是装饰网页样式的 CSS（层叠样式表，Cascading Style Sheets）诞生了。
CSS 是随着前端表现分离的提出而产生的，因为最早网页内容的样式都是通过 center、strike 等标签或 fontColor 等属性内容来体现的，而 CSS 提出使用样式描述语言来表达页面内容，而不是用 HTML 的标签来表达。
css 历史
CSS 的早期历史可以读此文：http://www.w3.org/Style/LieBos2e/history/ ，以及 CSS 之父的博士论文：层叠样式表。css 的特性早起由印刷出版业而来。
1994 年，Hkon Wium Lie 最初提出了 CSS 的想法，联合当时正在设计 Argo 的浏览器的 Bert Bos，他们决定一起合作设计 CSS，于是创造了 CSS 的最初版本。
1995 年他们在芝加哥的 Mosaic and the Web 大会上第一次正式提出了 CSS 的建议，博斯演示了 Argo 浏览器支持 CSS 的例子，哈肯也展示了支持 CSS 的 Arena 浏览器。当时 W3C 刚刚建立，W3C 对 CSS 很感兴趣，为此专门组织了一次讨论会。同年，W3C 组织（World WideWeb Consortium）成立，CSS 的创作成员全部成为了 W3C 的工作小组并且全力以赴负责研发 CSS 标准，层叠样式表的开发终于走上正轨。有越来越多的成员参与其中，例如微软公司的托马斯·莱尔顿(Thomas Reaxdon)，他的努力最终令 Internet Explorer 浏览器支持 CSS 标准。
1996 年 12 月，W3C 推出了 CSS 规范的第一版本。
1997 年，W3C 颁布 CSS1.0 版本 ，CSS1.0 较全面地规定了文档的显示样式，可分为选择器、样式属性、伪类 / 对象几个部分。这一规范立即引起了各方的关注，随即微软和网景公司的浏览器均能支持 CSS1.0，这为 CSS 的发展奠定了基础。W3C 组织负责 CSS 的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了 1998 年 5 月出版的 CSS 规范第二版。
1998 年 5，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准。
CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。
1999 年，CSS 3 的草稿开始制定
2001 年 5 月 23 日 W3C 完成了 CSS3 的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块
2005 年 12 月，W3C 开始 CSS3 标准的制定。css 是有一系列的标准组成。每个系列完成的时间不一样。所以 css3 是不断的演进的，直到现在。
css 模块演化图
从形式上来说，CSS3 标准自身已经不存在了。每个模块都被独立的标准化。
网页布局模式演变
用于展示的 HTML 标签
1990 年代中期，主流浏览器厂商（网景和微软）添加了一些标签（tag），从而使得设计者可以用“展示类”的标签来控制页面的外观，例如<b>让文字成为粗体，<i>则是斜体。
表格布局
table 布局，在 IBM 的邮箱系统中投放，是个很好的解决方案。
帧（Frames）
通过使用<frameset>和<frame src>标签，一个 HTML 页面中的一些区域可以包含另外的 HTML 文件。帧甚至还可以嵌套使用。
客户端分区响应图（Image Map）
这在 dreawave 大热的时代，是利器。就是在图片上面添加锚点与热点区域，然后点击锚点。
css 层叠样式
浏览器战争中的对手们（网景和微软）达成了共识，决定逐渐淘汰展示类标签。CSS（Cascading Style Sheet）的广泛使用大大促进了结构和展示的分离。
DIV 和“盒模型”
<div>元素起初是作为 CSS 的一部分被发明的，用来把页面组织成逻辑上独立的几个部分。它的设计初衷其实是替代当时最常用的表格布局。<div>标签内可以包含文字和图片，（从而形成“盒子”）。这些“盒子”可以设置宽度和/或长度，甚至还能有外边距（margin）和内边距（padding）。
CSS 定位（Position）属性
<div>默认是块级元素，如果不专门设置的话，多个<div>会一个个地上下层叠排列。而最早能够专门设置元素对齐的就是定位属性（即 position:fixed）。定位属性至今仍然是 CSS 规范的一部分
浮动布局
float 浮动属性最早是为了实现图片的文字环绕效果，允许的值包括 left、right、none、inherit，后来人们发现，浮动<div>元素可以用来有效地控制页面上元素的位置。把<div>设置成浮动会使得对应的盒子有一定的自适应效果，多个浮动元素一一排列，如果超出了容器元素宽度，一行放不下时还会自动换行。
移动和响应式网站
Flexbox,Column Grid
CSS Grid
基于 CSS 来实现某种网格（grid）布局的想法已经存在多年了。CSS 的两位联合发明人 Bert Bos 和 Håkon Wium Lie 都有相关的想法。
突破来自微软。一些微软员工一直在为他们的浏览器探索更好的布局工具，慢慢形成了一份提案。事实上，2011 年的时候，微软发布的 IE 10 中甚至用-ms-的厂商前缀实现了一个 grid 布局草案。随后的2012年，他们将规范的草案提交给了 W3C。微软还为他们的 grid 系统申请了一份专利，并通过了审批。在专利文档中，这项技术被称为基于样式法则的内容无关网格布局。
css grid 第一份规范的网址是：https://www.w3.org/TR/css-grid-1
现在所有的主流浏览器全都支持 CSS Grid 了。
Flexbox
这个是目前主流的布局方式。就不多说了
参考文章：
前端技术演进（四）：前端三层结构与应用 https://juejin.im/post/5c137fc96fb9a049e82b677b
转载本站文章《css过去及未来展望—分析css演进及排版布局的考量》,请注明出处：https://www.zhoulujun.cn/html/webfront/style/cssBase/2020_0520_8436.html
版权声明: 本文为 InfoQ 作者【zhoulujun】的原创文章。
原文链接:【http://xie.infoq.cn/article/329a83f021eebaf46f1ffccf2】。文章转载请联系作者。
还未添加个人签名 2021-06-25 加入
15年草根站长，尽在：zhoulujun.cn
评论