应直接使用 normalize.css 并置于所有自定义 CSS 之前，因其通过“收敛”而非“清零”统一浏览器默认样式差异，保留语义与可访问性；禁用 * { margin: 0; padding: 0 }，因其破坏表单控件、替换元素及伪元素行为，且权重低易被覆盖。
直接用 normalize.css，放在所有自定义 CSS 之前载入，就能解决绝大多数跨浏览器默认样式不一致问题；别手写 * { margin: 0; padding: 0; }，它会破坏表单控件、图片、伪元素等关键行为。
为什么不能只靠通配符重置 *
通配符看似简单，但实际漏掉三类关键节点：::before 和 ::after 伪元素默认仍是 content-box，导致清除浮动或装饰性布局错位；img、svg、video 等替换元素的 vertical-align 和 max-width 被清零后会撑破容器；button、input 等表单控件失去默认字体继承和行高，iOS 上键盘弹出时可能触发意外缩放。
更隐蔽的问题是：通配符权重低、无语义，后续任意一个 div { margin: 1em; } 就能覆盖它，而你根本没意识到——因为 DevTools 的 Computed 面板里它被划掉了。
normalize.css 必须放在最前面加载
它的修复逻辑依赖声明顺序和选择器权重。比如 button { font-family: inherit; } 这条规则，如果 body { font-family: "Inter", sans-serif; } 先加载，而 button 没显式继承，那按钮在 macOS 和 Windows 上就会用不同系统字体渲染，宽度差 1–2px，浮动布局临界时直接换行。
实操建议：
- 纯 HTML 项目：
必须是中第一个 - Webpack/Vite 项目：在主 SCSS/Sass 入口顶部写
@import 'normalize.css';，确保打包后 CSS 内容位于最前 - 绝对不要把
normalize.css内容复制进main.css末尾——它的修复已失效
混用 reset.css 和 normalize.css 会引发不可预测冲突
两者目标相反：reset.css 把 blockquote 的 margin 设为 0，normalize.css 显式设为 margin: 1em 40px;；混用后结果取决于谁后加载、谁权重高，调试时你会在 DevTools 里看到两套 margin 值来回切换。
典型症状包括：
- 文字突然变小：某些 reset 方案重置了
html { font-size: 100%; }，而normalize.css不干预，混用可能触发 UA fallback 尺寸 - 行高塌陷：
reset.css设line-height: normal;，直接覆盖normalize.css的line-height: 1.15; - 项目用了 Tailwind 或 Ant Design？它们内部已集成 normalize-like 行为，重复引入反而引发权重冲突
浮动布局里最容易被忽略的三个干扰源
即使加了 normalize.css，浮动仍错位？大概率是这三者之一在捣鬼：
- 父容器用了
padding，但子项width没补偿：比如父级padding: 12px，子项写width: 50%，实际可用宽度只剩calc(100% - 24px)，得写成width: calc(50% - 12px) - 字体栈混入
system-ui：macOS 和 Windows 渲染同一段文字宽度差 1–2px，导致float: left总宽偶然超限 - 第三方脚本动态插入
标签，覆盖了你的重置规则；可在 DevTools 的 Computed 面板里点开box-sizing，看“来源”是否来自你预期的 CSS 文件
真正难处理的不是重置本身，而是重置之后那些没被归一化的微小差异——它们只在特定字号、特定缩放比、特定父容器尺寸下才暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
