CSS 发展史

前 CSS 时代：Web 的“蛮荒时期”（1994 年之前）

• 特点：HTML 承担了所有内容、结构和表现的任务。
• 方法：使用 <font>、<center>、<b> 等标签定义样式，使用 bgcolor、align 等属性。
• 问题：
  • 内容与表现严重耦合：修改样式需要逐个修改标签，维护是噩梦。
  • 代码冗余：相同的样式需要在多个地方重复定义。
  • 功能极其有限：无法实现复杂布局（如多栏、精确定位）。

1996：CSS1 正式发布（W3C 推荐标准）

1994 年：哈肯·维姆·莱(Håkon Wium Lie)提出了 CSS 的最初想法。他的目标是解决 HTML 在表现力上的不足，将内容与样式分离。

1996 年 12 月：W3C 发布了 CSS 1.0 规范。这是一个里程碑。

• 核心特性：字体、颜色、背景、文本属性（对齐、装饰）、外边距、边框、内边距等。
• 局限：没有定位机制，布局能力仍然很弱。

1998：CSS2 发布

1998 年 5 月：W3C 发布了 CSS 2.0 规范。

意义：CSS 2.0 为复杂网页布局奠定了基础，催生了“DIV+CSS”的布局时代，彻底告别了表格布局。

• 定位模型：引入了 position: absolute/relative/fixed，实现了元素在页面上的精确定位。
• 媒体类型：为不同的输出设备（如屏幕、打印机）指定样式。
• 盒模型：明确定义了内容、内边距、边框、外边距之间的关系。
• z-index：引入了层叠上下文的概念。

2004：CSS 2.1（最重要的经典版本）

背景：CSS 2.0 过于宏大，部分特性不清晰，浏览器实现不一致，导致严重的兼容性问题。

CSS 2.1：发布于 2004 年作为草案，2011 年才成为正式推荐标准。它是对 CSS 2.0 的修正和子集，删除了浏览器未实现或实现不一致的特性，成为了 Web 开发的“事实标准”。

这个时期的痛点：

• 浏览器战争：IE 6/7/8 与 Firefox、Chrome 早期版本存在巨大差异。
• Hack 与技巧：开发者需要大量使用“CSS Hack”和“滤镜”来让页面在不同浏览器中表现一致（如 *html、_height、!important 技巧等）。
• 布局难题：实现等高栏、垂直居中、多栏流体布局非常困难，催生了大量的“奇技淫巧”。

2005–2010：CSS3 分模块化（现代 CSS 的起点）

CSS3 不是一次性的“版本”，而是：

• 将 CSS 分成“模块（module）”
• 每个模块独立制定、发布和升级

比如：

• 选择器模块（Selectors Level 3）
• 背景和边框（Backgrounds and Borders）
• 动画（Animations）
• 转换（Transforms）
• 弹性布局（Flexbox）
• 网格布局（Grid）

这个阶段是 CSS 现代化的转折点。

2009–2014：现代布局兴起（Flexbox、Grid）

2009：Flexbox 最初版本

提供了：

• 弹性子项
• 水平/垂直居中变得容易
• 自适应排版

2012–2015 年逐步标准化。

2011：CSS Grid 提案

2017 年正式成为标准。

开启真正意义上的网页二维布局。

2015–现在：CSS 的现代功能爆发

这段时期 CSS 的发展速度极快，新特性大量出现。

版式布局（Layout）

• Flexbox（单轴）
• Grid（双轴）
• Multi-column（多栏布局）
• Writing Modes（竖排/横排）