直接用 normalize.css 是因为它校准而非清零浏览器默认样式，保留语义化表现并修复跨浏览器不一致；需全局引入、置于自定义样式前，禁与 reset.css 混用，且需手动处理 input[type="number"]、textarea 等漏网问题。

为什么直接用 normalize.css 而不是自己写重置？

因为浏览器默认样式差异远不止 margin 和 padding——button 的字体继承、input 的行高、audio 和 video 的默认边框、甚至 details 的折叠行为，在 Chrome/Firefox/Safari/Edge 里全都不一样。自己写 * { margin: 0; padding: 0; } 只是粗暴抹平，反而破坏语义化表现（比如列表项缩进消失、表单控件失焦状态异常）。normalize.css 不是清零，是“校准”：保留有用默认，修复不一致，让 h1 在各浏览器都真正是大号加粗文本，em 真正斜体且可继承。

怎么引入才不会白加？常见加载错误

最常踩的坑是加载顺序和作用域冲突：

• normalize.css 必须放在所有自定义 CSS 之前，否则你的 body { margin: 20px; } 会覆盖它的基础重置
• 如果用构建工具（Webpack/Vite），别只 @import 'normalize.css' 到某个组件里——它得是全局生效的，应 import 到入口 JS 或主 SCSS 文件顶部
• CDN 引入时注意版本：https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css（v8 是最后一个广泛兼容 IE11 的版本；v9+ 已放弃 IE，若需支持旧版，别升错）

normalize.css 和 reset.css 混用会怎样？

千万别混。两者设计哲学相反：reset.css 把所有元素打回“裸状态”，连 strong 加粗、blockquote 缩进都干掉；normalize.css 则刻意保留这些语义化样式。混用后会出现诡异现象：比如 button 看起来像普通文字（被 reset 清掉样式），但点击时又突然有默认焦点环（normalize 保留了 focus 样式）。实际项目中，选一个，只用一个。

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

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

下载

引入后还要手动处理哪些“漏网之鱼”？

normalize.css 解决的是标准 HTML 元素，但现代项目绕不开这些：

• input[type="number"] 在 Safari 里右侧有微调按钮，Chrome 里没有——得单独加 appearance: none; 并手绘按钮
• textarea 的 resize 行为在 Firefox 默认可拉，Chrome/Safari 默认也可拉，但尺寸计算逻辑不同，建议统一设为 resize: vertical; 或 none
• 自定义 Web Component（如 my-tabs）完全不在 normalize 覆盖范围内，它的 shadow DOM 样式必须自己重置

这些没法靠一个 CSS 文件解决，得在具体组件里补。

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