CSS: 重置与原子样式
在实际开发中，不同浏览器对 HTML 元素有各自的默认样式。为了让页面在各浏览器中表现一致，我们需要重置这些默认样式。同时，为了提高开发效率，原子类样式也是非常有用的工具。
1. 为什么需要 CSS Reset？
每个浏览器都有自己的"用户代理样式表"——就是浏览器自带的默认样式。例如：
<h1>在不同浏览器中的字号可能不同<body>的 margin 值不同<ul>的 padding 值不同
这些差异导致同一个页面在不同浏览器中看起来不一样。CSS Reset 就是为了消除这些差异。
2. 简单的 Reset 写法
一个最基础的 reset 代码：
▶ 示例
HTML
<style>
/* 清除所有元素的外边距和内边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置统一的字体和背景 */
body {
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
/* 清除列表样式 */
ul, ol {
list-style: none;
}
/* 清除链接下划线 */
a {
text-decoration: none;
color: inherit;
}
/* 图像自适应 */
img {
max-width: 100%;
height: auto;
display: block;
}
</style>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>
<a href="#">这是一个链接</a>
<img src="/assets/images/tutorials/html-example-photo.webp" alt="示例图片">
(1) 常见的 Reset 方案
- Reset CSS（Eric Meyer 的经典方案）：粗暴地将所有元素 margin/padding 清零
- Normalize.css：保留有用的默认样式，只修复浏览器不一致的地方。是目前最流行的方案
- 自己的简化版：只重置项目中会用到的元素
3. 什么是原子类样式？
原子类（Atomic CSS）是一种 CSS 编写方式，每个类只负责一个样式属性。比如：
▶ 示例
HTML
<style>
/* 原子类示例 */
.text-center {
text-align: center;
}
.text-red {
color: red;
}
.text-bold {
font-weight: bold;
}
.mt-10 {
margin-top: 10px;
}
.p-20 {
padding: 20px;
}
.w-full {
width: 100%;
}
.bg-yellow {
background-color: yellow;
}
.border {
border: 1px solid #ccc;
}
</style>
<h2 class="text-center text-red">居中的红色标题</h2>
<p class="text-bold mt-10">加粗的段落，有上边距</p>
<div class="p-20 bg-yellow border">有内边距、黄色背景、边框的盒子</div>
然后在 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）：
▶ 示例
HTML
<style>
/* ===== reset.css ===== */
/* Reset */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.6;
color: #333;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
display: block;
}
/* 原子类：文本 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-bold { font-weight: bold; }
/* 原子类：间距 */
.m-0 { margin: 0; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
/* 原子类：宽高 */
.w-full { width: 100%; }
/* 原子类：背景和边框 */
.bg-light { background-color: #f5f5f5; }
.border { border: 1px solid #ddd; }
.rounded { border-radius: 4px; }
</style>
<div class="p-20 bg-light border rounded">
<h3 class="text-center">卡片标题</h3>
<p class="mt-10">卡片内容</p>
</div>
❓ 常见问题
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，仅使用原子类完成一个简单的卡片布局（包含标题、文字、图片）。
