CSS: 重置与原子样式
最后更新：2026-10-13
在实际开发中，不同浏览器对 HTML 元素有各自的默认样式。为了让页面在各浏览器中表现一致，我们需要重置这些默认样式。同时，为了提高开发效率，原子类样式也是非常有用的工具。
1. 为什么需要 CSS Reset？
每个浏览器都有自己的"用户代理样式表"——就是浏览器自带的默认样式。例如：
<h1>在不同浏览器中的字号可能不同<body>的 margin 值不同<ul>的 padding 值不同
这些差异导致同一个页面在不同浏览器中看起来不一样。CSS Reset 就是为了消除这些差异。
2. 简单的 Reset 写法
一个最基础的 reset 代码：
▶ 示例
▶ 试一试(1) 常见的 Reset 方案
- Reset CSS（Eric Meyer 的经典方案）：粗暴地将所有元素 margin/padding 清零
- Normalize.css：保留有用的默认样式，只修复浏览器不一致的地方。是目前最流行的方案
- 自己的简化版：只重置项目中会用到的元素
3. 什么是原子类样式？
原子类（Atomic CSS）是一种 CSS 编写方式，每个类只负责一个样式属性。比如：
▶ 示例
▶ 试一试然后在 HTML 中组合使用：
HTML
<div class="text-center p-20 mt-10 bg-yellow">
文字居中，有内边距和上外边距，黄色背景
</div>
(1) 原子类的优势
- 粒度细：每个类只做一件事，组合灵活
- 复用性高：一个
.flex可以在任何需要 flex 的地方使用 - 减少 CSS 体积：避免重复声明相同的属性组合
- 修改安全：不会因为改了某个类而影响其他不相干的元素
(2) 原子类的不足
- HTML 中类名会很长：
class="flex items-center justify-between p-20 mt-10 text-center" - 样式和结构在 HTML 层面混合，有人觉得不好阅读
- 不适合复杂的组件级样式
4. 综合使用：Reset + 原子类
实际项目中，通常把 Reset 和常用的原子类放在一个基础样式文件中（常命名为 reset.css 或 base.css）：
▶ 示例
▶ 试一试❓ 常见问题
Q Normalize.css 和 CSS Reset 选哪个？
A 推荐 Normalize.css，它在保留有用默认样式（如 h1 的字号）的同时只抹平浏览器差异。传统 Reset 把所有样式都归零，意味着你要重新定义每个元素，反而增加了工作量。
Q
* { box-sizing: border-box } 会影响性能吗？A 几乎不会。通配选择器的性能开销在现代浏览器中已经微乎其微，而
box-sizing: border-box 带来的好处远超那点理论上的性能损失。放心用。Q 原子类（如 .mt-20）适合什么项目？
A 适合大型项目或需要统一设计系统的场景。小项目直接用普通的 class 就够了。Tailwind CSS 这种原子化框架学习成本较高，不是每个项目都需要。
📖 小节
- CSS Reset 用来消除不同浏览器之间的默认样式差异，是项目的基础保障
- 原子类样式则提供了一种"乐高积木"式的 CSS 编写方式——每个类只做一件事，按需组合
- 在实际项目中，Reset 和原子类通常合并在同一个基础样式文件中，作为所有页面的起点
📝 作业
- 创建一个
reset.css文件，包含以下内容：- 通配符重置 margin、padding 和 box-sizing
- body 的基础字体和颜色设置
- a 标签的样式重置
- img 的响应式设置
- 在
reset.css中添加至少 10 个常用的原子类（flex、间距、文本对齐等）。 - 创建一个 HTML 页面，通过
<link>引入reset.css，仅使用原子类完成一个简单的卡片布局（包含标题、文字、图片）。
