0Pricing
CSS Academy · 课时

CSS 重置与规范化

使用 CSS 重置和规范化样式表，移除浏览器默认样式之间的不一致。

CSS 重置与规范化 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

问题：浏览器默认样式不一致

每个浏览器都有内置的用户代理样式表，其中包含针对标题、外边距、内边距、列表和表单元素的默认样式。这些默认样式在不同浏览器之间存在差异，从而导致外观不一致。

CSS 重置

CSS 重置会移除浏览器的所有默认样式，为您提供一张白纸。著名的 Eric Meyer 重置方案会将外边距、内边距以及许多属性设置为零或无。

<h1>Title</h1>
<p>Paragraph with reset margins.</p>
<ul><li>Item</li><li>Item</li></ul>
<ol><li>Step</li><li>Step</li></ol>

CSS 规范化

Normalize.css 采用了不同的方法：它不是移除所有默认样式，而是让浏览器的默认样式保持一致，同时修复已知错误，并保留标题大小等有用的默认样式。

CSS 重置与规范化的权衡

比较：

  • 重置：一张白纸，由您定义所有内容，工作量更大
  • 规范化：保留有用默认样式的一致基线，需要编写的自定义代码更少

现代 CSS 重置

一种流行的现代重置方案（由 Josh Comeau 编写）针对影响最大的默认样式：

<h1>Reset Demo</h1><h2>Sub</h2><h3>Sub</h3><h4>Sub</h4><h5>Sub</h5><h6>Sub</h6>
<p>Body text with smooth font rendering.</p>
<picture><img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><rect width='300' height='120' fill='%234f8fdb'/></svg>" alt="demo" /></picture>
<video controls></video>
<canvas></canvas>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="tomato"/></svg>

将图像设为块级元素

将图像设置为 display: block，可以移除容器内图像底部默认的行内间隙（由 line-height 导致）：

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='160'><rect width='400' height='160' fill='%23ff6347'/></svg>" alt="block image" />

列表重置模式

为自定义导航或界面列表设置样式时，请移除列表标记和缩进：

<ul class="nav-list"><li>Home</li><li>Shop</li><li>About</li></ul>

表单元素重置

在许多浏览器中，表单元素（input、button、textarea）默认不会继承字体。常见的修复方法：

<input type="text" placeholder="Name" />
<button>Submit</button>
<textarea placeholder="Message"></textarea>
<select><option>Choice A</option></select>

Tailwind 的 Preflight

Tailwind CSS 包含自己的重置方案，称为 Preflight，构建于 modern-normalize 之上。如果您使用 Tailwind，重置方案已经自动应用。

重置方案的放置位置

始终将您的重置/规范化样式表放在第一位，位于所有组件或工具样式之前。层叠顺序可以确保您的样式覆盖重置方案，而不会产生优先级冲突。

自定义重置方案的注意事项

请根据项目需求构建自己的最小重置方案，而不是引入完整的第三方重置方案。只包含所需的规则，以减小 CSS 文件体积。

<p>Base font-size and line-height set on the root element affect the whole page.</p>

快速检查

CSS 重置与 CSS 规范化之间的关键区别是什么？

回顾

浏览器默认样式并不一致。CSS 重置会移除所有默认样式；normalize.css 会使这些样式保持一致。现代重置方案专注于影响最大的规则，例如 box-sizing: border-box、图像最大宽度，以及让表单元素继承字体。始终首先加载重置方案。

常见问题解答

「CSS 重置与规范化」课时是免费的吗？

是的 — 「CSS 重置与规范化」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「CSS 重置与规范化」这节课中我会学到什么？

使用 CSS 重置和规范化样式表，移除浏览器默认样式之间的不一致。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「CSS 重置与规范化」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 块级、行内与行内块
  2. 可见性与 Display None
  3. 溢出：滚动、裁剪与自动
  4. CSS 重置与规范化
← 返回 CSS Academy