CSS2 是什么
CSS2 是 W3C 于 1998 年发布的层叠样式表规范,它在 CSS1 的基础上补充了定位、媒体类型、字体下载、表格布局等能力。虽然今天谈论更多的是 CSS3,但 CSS2 中的大量规则仍是浏览器默认支持的基础,理解它有助于看懂旧项目代码,也能更清楚 CSS3 新增了什么。
三种定位机制
CSS2 明确区分了三种定位方式,这是它最核心的贡献之一。
普通流
块级元素自上而下排列,行内元素从左到右排列。这是默认状态,也是页面结构的主要骨架。
浮动
通过 float 让元素脱离普通流并靠向一侧,文字会环绕它。浮动最初用于图文混排,后来被大量用于多列布局。它的副作用是父容器高度塌陷,需要清除浮动。
绝对定位
position 属性提供 relative、absolute、fixed 等值。绝对定位元素脱离文档流,相对最近的已定位祖先元素偏移,适合做弹层、角标等覆盖型 UI。
选择器与层叠规则
CSS2 扩展了选择器能力,包括:
- 子选择器
>:只选直接子元素 - 相邻兄弟选择器
+:选紧邻的同级元素 - 属性选择器
[type="text"] - 伪类
:hover、:focus、:first-child - 伪元素
:before、:after、:first-line
层叠规则也更完整:按来源、权重、特异性排序,!important 可提升声明优先级。这套计算方式至今未变,是排查样式冲突的依据。
媒体类型与打印样式
CSS2 引入 @media 规则,可针对 screen、print、aural 等设备分别应用样式。最实用的是打印样式:隐藏导航、调整字号、去掉背景色,让页面在纸上可读。这一思路后来演化为响应式设计中的媒体查询。
表格与列表的精细控制
border-collapse、border-spacing 解决表格边框合并问题;caption-side 控制标题位置;empty-cells 决定空单元格是否显示边框。列表方面,list-style-position 可让标记进入或留在内容框外。这些属性在后台管理系统里仍然常见。
为什么现在还值得了解
一是兼容性稳。CSS2 属性在所有现代浏览器中行为一致,不需要前缀。二是很多“CSS3 特性”其实是 CSS2 的延伸,比如 position: fixed 在 CSS2 已定义,只是早期移动端支持差。三是阅读旧代码时,浮动布局和清除浮动的写法几乎都基于 CSS2。
局限与过渡
CSS2 没有圆角、阴影、渐变、动画,也不能直接做等宽列或垂直居中。这些缺口后来由 CSS3 补齐。但 CSS2 建立的盒模型、层叠、定位三大基石没有改变。把 CSS2 吃透,再学 Flexbox 和 Grid,会更容易理解每个新属性到底解决了什么旧问题。

