*重置边距常失效，因浏览器默认样式权重高、优先级低且box-sizing不统一；应改用html/body显式清零+**,::before,::after组合重置并设border-box。
为什么*重置边距经常失效
直接写 * { margin: 0; padding: 0; } 看似简单，但实际常被浏览器默认样式、CSS优先级或继承行为绕过。比如 button、input、h1 这些元素自带强默认 margin/padding，且部分浏览器（如 Chrome 对表单控件）会用 user agent stylesheet 高权重要求覆盖，* 的权重不够，压不住。
- 通用选择器
*优先级极低（0,0,0,0），遇到任何类名、标签名或属性选择器都会被覆盖 -
*:not(html)这类写法看似聪明，但不解决根本问题，反而增加不可预测性 - 某些重置场景下，
box-sizing不统一也会让“看起来没边距”变成“实际占位不对”
真正有效的基础重置写法
不用*，改用更精准、更高权的组合：把 html 和 body 单独拎出来设为零，再配合 *, *::before, *::after 统一 box-sizing，这是现代重置最稳的起点。
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
-
html和body必须显式清空，否则body默认 8px margin 会撑开整个页面 - 加上
*::before, *::after是为了确保伪元素也不带边距，避免某些 CSS 框架或自定义图标（如 Font Awesome）意外溢出 -
box-sizing: border-box虽然不属边距范畴，但和边距感知强相关——没它，padding会撑大 width，导致布局错乱
哪些地方不能只靠重置，得手动补
重置不是万能胶。有些边距来自语义行为或渲染规则，删了反而破坏可访问性或结构逻辑。
-
p、h1–h6、ul、ol的上下间距是排版必需，全清会导致段落粘连；应单独用margin-block-start/end控制 -
fieldset在部分浏览器中 margin 不响应*重置，需单独声明fieldset { margin: 0; } - 表格单元格（
td,th）的 padding 默认不为零，且border-collapse: collapse才能真正消除间隙，光清 padding 不够 - Flex/Grid 容器子项的
gap不受 margin/padding 重置影响，别误以为“清了边距 gap 就没了”
用 Normalize.css 替代手写重置的时机
如果你项目需要跨浏览器一致、又不想漏掉 details、summary、mark 这些冷门但有默认边距的元素，手写重置很快失控。这时候直接引入 normalize.css 更省事。
-
normalize.css不暴力归零，而是保留合理默认值（如列表项缩进、标题间距），只修正浏览器差异 - 它对
button、input[type="search"]等难搞元素做了针对性处理，比*可靠得多 - 体积小（压缩后约 2KB），CDN 直引即可：
https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css
真要快速起步，先上 normalize.css，再局部覆盖（比如清 body margin），比硬刚 * 少踩三天坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
