通配符重置 * 在生产环境危险，因无差别归零所有 margin/padding，破坏表单控件可访问性、交互及语义；推荐用 normalize.css + box-sizing: border-box 对齐浏览器差异，保留合理默认。
直接用 * { margin: 0; padding: 0; } 看似一步到位，但会破坏表单控件的可访问性、交互行为和语义完整性，真实项目中基本不可行。
为什么通配符重置 * 在生产环境里是危险操作
它不区分元素类型，无差别归零所有 margin/padding，导致：
-
input、button、select失去原生内边距，点击区域变小，文字紧贴边界 -
select在 Safari/Chrome 中下拉箭头偏移或消失 -
input[type="number"]的 Firefox 增减按钮被隐藏 -
textarea的resize行为失效，无法拖拽缩放 -
:focus轮廓（outline）被覆盖，屏幕阅读器用户失去焦点提示，违反 WCAG
推荐方案：用 normalize.css + box-sizing: border-box
它不“清零”，而是“对齐”——修复浏览器差异，保留合理默认（如 sub/sup 垂直偏移、pre 的空白处理），同时确保 audio、canvas 等新标签 display 行为一致。
- 必须在所有自定义 CSS 之前加载，否则规则会被覆盖
- 推荐 npm 安装：
npm install normalize.css，然后在入口 JS 中import "normalize.css" - 不要用 CDN 放在
底部——网络延迟可能造成 FOUC（闪动） - 它不设
box-sizing: border-box，所以务必紧跟一行：* { box-sizing: border-box; }
如果非要手写轻量重置，只清布局干扰项，放过表单和媒体元素
避开 input、button、select、textarea、img、video、audio、svg 等有原生行为的元素，只处理常见干扰：
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, hr {
margin: 0;
}
ul, ol, li, dd, dt {
padding: 0;
}
h1, h2, h3, h4, h5, h6, p {
font-size: inherit;
font-weight: inherit;
}
a {
text-decoration: none;
color: inherit;
}
这样既消除了 h1 巨大外边距、ul 左侧缩进等常见干扰，又完整保留了表单控件的可访问性与视觉完整性。
真正容易被忽略的是：重置不是目的，可控才是。很多团队卡在“到底要不要清掉 button 的默认边框”这种细节上，其实该问的是——这个元素是否参与布局？是否需要被 JavaScript 控制尺寸？是否由第三方组件渲染？答案不同，重置策略就该不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
