不能直接用 * { margin: 0; padding: 0 }，因其暴力清空会破坏旧系统依赖的浏览器默认行为，如 fieldset 边框、textarea 拖拽手柄、details 折叠箭头；导致 select 箭头消失、input[type="number"] 增减按钮错位、button 文字偏移、焦点轮廓被覆盖。
为什么不能直接用 * { margin: 0; padding: 0 } 清旧系统样式
旧系统往往依赖大量隐式继承和浏览器默认行为（比如 fieldset 的边框、textarea 的可拖拽手柄、details 的折叠箭头），暴力通配符会直接切断这些逻辑。现象包括：select 下拉箭头消失、input[type="number"] 增减按钮错位、button 文字垂直偏移、屏幕阅读器焦点轮廓被覆盖。
normalize.css 在遗留系统里怎么不翻车
它不是清空，而是对齐——把 IE8 的 h1 margin、Chrome 的 ul padding、Firefox 的 button line-height 全部拉到同一基准，同时保留语义和可访问性。但必须满足三个硬条件：
- 下载最新版
normalize.css文件本地引入，别用 CDN 链接（旧系统常有网络策略或离线部署） - 在 HTML 的
中作为第一个<link>加载，顺序不能错 - 检查 DevTools → Elements → 任一原生元素 → Styles 面板，确认
margin、padding等属性来源是normalize.css且未被划掉
必须手动补的三处关键重置
即使用了 normalize.css，这三处不加，旧系统布局仍大概率崩：
-
* { box-sizing: border-box }—— 否则width: 100%+padding会撑破容器，老系统里满屏div套div尤其敏感 -
img { max-width: 100%; height: auto; display: block }—— 防止图片突破父容器，也解决 inline 图片底部空白问题（旧系统常用table布局，这个空白会破坏对齐） -
input, button, select, textarea { font: inherit; line-height: normal }—— 避免部分 IE/旧 Chrome 下字体缩放异常、行高塌陷
遇到 !important 泛滥的老样式怎么办
旧系统 CSS 常带大量 !important，导致 normalize.css 规则失效。不要硬刚权重，改用更具体的组合：
- 把重置规则写成
html * { margin: 0 !important }（慎用，仅限兜底） - 优先用属性选择器精准打击：
input[type="text"] { padding: 4px !important } - 对全局污染源（如某个 legacy.css），用
@layer reset包裹并设最高层序（需确认浏览器支持；不支持时降级为html body * { ... }）
真正难的不是加规则，而是判断哪些“默认样式”其实是业务逻辑依赖——比如某个报表页面靠 th 的默认粗体区分表头，重置后反而看不懂数据。得先跑一遍视觉回归，再动手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
