直接用 reset.css 会导致按钮文字变小、表单错位，因其粗暴清空 button、input 等控件的 font-size 和 line-height，破坏浏览器 UA 样式依赖；应补修复样式如 font: inherit，或改用 normalize.css 并注意其隐式行为。
为什么直接用 reset.css 会导致按钮文字变小、表单错位
因为传统 reset.css（比如 Eric Meyer 版）粗暴清空所有元素的 font-size、line-height、margin 和 padding，连 button、input、select 这些原生控件的默认样式也一并抹掉。浏览器对这些控件的渲染本就依赖 UA 样式中的字号和行高，重置后若没手动补全，就会出现文字缩进异常、点击区域变窄、垂直对不齐等问题。
实操建议：
- 别把
reset.css当“万能清洁剂”直接丢进项目；它适合从零手写 UI 的场景，但现代组件库或设计系统往往已内置样式逻辑，强重置反而破坏一致性 - 如果必须用 reset，至少在之后立即补一段针对表单控件的修复样式，例如：
button, input, select, textarea { font: inherit; line-height: normal; } - 检查 DevTools 的 Computed 面板，确认
button的font-size是否被重置为100%却未继承父级——这说明 reset 切断了字体继承链
normalize.css 真的“无害”？哪些地方它悄悄改了行为
normalize.css 不是“不改动”，而是有选择地标准化。它保留有用的默认行为（比如 h1 的字号层级、blockquote 的缩进），但会修正跨浏览器差异，比如统一 audio 和 video 的默认边框、调整 sub/sup 的 vertical-align 值。这些改动本身合理，但在已有样式深度定制的项目里可能触发意料之外的布局偏移。
实操建议：
- 引入前先运行一次 diff：用浏览器打开一个含
sub、details、mark的测试页，关闭/开启normalize.css，观察 computedvertical-align和display是否变化 -
normalize.css对table的处理较保守，不会重置border-collapse，但会强制border-spacing: 0—— 如果你依赖旧版 IE 的默认间距，这里可能出缝 - 它的
prefers-reduced-motion相关规则只在最新版（v8.0+）中存在，老项目若用的是 v7.x，动画禁用逻辑压根没生效
Vue/React 项目里，CSS 重置该放在哪里才不影响 scoped 样式隔离
放在 main.css 或全局入口样式里最稳妥。一旦写进某个 .vue 文件的 块（即使没加 scoped），Webpack/Vite 的 CSS 提取逻辑可能把它打包进组件 CSS chunk，导致在 SSR 或微前端场景下重复注入、优先级混乱。
实操建议：
- 在
src/assets/styles/base.css中引入normalize.css，然后在main.js或main.ts顶部import './assets/styles/base.css' - 避免在
App.vue的里 @import，尤其当项目开了 CSS scope hoisting 或使用了css-minimizer-webpack-plugin时，@import 可能被内联但失去层叠顺序 - 如果用 Tailwind，它默认已集成 normalize 行为（通过
@layer base），此时再额外引入normalize.css会造成冗余甚至冲突，需删掉
自定义重置要不要删掉 html 和 body 的 margin？
要删，但不是为了“清空一切”，而是为了消除 Safari 移动端的默认外边距（iOS Safari 会给 body 加 8px margin）。不过直接设 margin: 0 有副作用：当页面内容不足一屏时，body 高度塌陷，导致背景色/图无法铺满视口。
实操建议：
- 更安全的写法是：
html { height: 100%; } body { margin: 0; min-height: 100vh; } - 不要只重置
body，html的height: 100%是让vh单位正常工作的前提，否则min-height: 100vh在某些安卓 WebView 下会失效 - 如果你用 CSS 自定义属性做主题切换，可以把
body的 margin 也纳入变量管理，方便夜间模式等场景动态控制
Normalize 和 reset 最大的区别不在代码行数，而在对“浏览器默认行为”的信任程度。选哪个不重要，重要的是你是否清楚某一行 margin: 0 正在覆盖什么、又放过了什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
