应直接用 normalize.css，因其温和校准浏览器差异而不破坏语义与可访问性；需首个加载、补充 box-sizing 等三处关键重置，避免与 reset.css 混用。

绝大多数新项目应该直接用 normalize.css，除非你明确需要从视觉上“归零”并完全接管所有样式细节（比如构建设计系统底层或极简 UI 框架）。

为什么 normalize.css 是默认更安全的选择

它不破坏表单控件的可用性：保留 button 的 cursor: pointer、input 和 select 的原生 appearance、textarea 的缩放手柄；修复的是真实差异，比如 sub/sup 基线偏移、audio/video 默认宽高、details 在 Safari 中不展开等。常见错误是看到按钮还是蓝底白字，就以为没生效——其实这正是它该有的行为。

• normalize.css 保留 h1～h6 的语义化加粗和相对字号缩放，不用你重写标题层级
• 它不碰 box-sizing，默认维持 content-box，避免与现代框架（如 Tailwind）的全局 border-box 冲突
• 对 font-family 不硬编码，而是沿用各平台默认字体栈（如 macOS 的 -apple-system），不强制统一为 "Helvetica"

什么情况下才考虑 reset.css

只有当你需要彻底剥离浏览器默认样式，并准备手动补全所有基础表现时才适用。典型场景包括：开发一套完全自定义的组件库，且所有控件都走 SVG 或 Canvas 渲染；或者维护一个极老的后台系统，其现有 CSS 已严重依赖“归零后重写”的逻辑。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 传统 reset.css（如 Eric Meyer 版）会清空 button 的 padding 和 border，导致点击区域变小、焦点 outline 消失，必须手动加 outline 和 focus-visible 逻辑
• 它全局设 * { box-sizing: border-box; }，但某些表单元素（如 select 在 Safari）在 border-box 下会出现光标错位或下拉箭头截断
• 如果你用了 reset.css 却没补全 user-select、cursor、resize 等交互属性，用户可能无法选中文本、拖拽 textarea 或点击按钮

引入顺序和版本陷阱必须盯紧

normalize.css 或 reset.css 必须在所有其他 CSS（包括框架如 Bootstrap、Element Plus）之前加载，否则会被覆盖失效。尤其注意 normalize.css v8+ 已移除对 dialog、:focus-visible 的模拟样式，若项目还在用 v7.x，可能和现代浏览器原生行为冲突——比如 summary 点击后不响应，或 dialog 默认显示而非隐藏。

• 检查 node_modules/normalize.css/package.json，确认版本 ≥ 8.0.2
• 若用 PostCSS 插件（如 postcss-normalize），确认未被 legacy 配置悄悄降级到旧版
• 对 dialog 元素，必须显式写 dialog { display: none; }，normalize.css v8+ 不再代劳

真正容易被忽略的不是“选哪个”，而是版本漂移和加载时机——v7 和 v8 对 details、dialog 的处理逻辑相反，而构建工具可能在你不知情时注入旧规则。别只看文件名，得查实际生效的 CSS 规则。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！