body { margin: 0 } 挡不住顶部空白是因为子元素（如h1、p）的margin-top发生外边距合并并溢出到视口；需统一box-sizing、清除非语义性内外边距、克制初始化字体行高，并确保重置样式优先于响应式断点规则。
为什么 body { margin: 0 } 压根挡不住顶部空白
你加了 body { margin: 0 }，页面顶部还是有 8px 或 21px 空白？这不是你的错——是 h1、p、ul 这些元素自带的 margin-top 在“溢出”：当它们作为 body 的第一个子元素，且 body 没有 padding-top 或 border-top 隔断时，外边距会直接作用到视口。不同浏览器对同一标签的默认 margin 值不同（比如 Chrome 的 h1 是 margin: 0.67em 0，Firefox 可能是 0.83em），响应式布局里像素级对齐一碰就破。
reset.css 不是“可选配件”，而是响应式计算的前置条件
响应式依赖 rem、em、栅格宽度百分比等相对单位，而这些单位的基准（比如根字体大小、行高、容器内边距）一旦被浏览器默认样式污染，计算就会失准：
-
html元素没重置font-size？Chrome 可能用 16px，旧版 Safari 可能 fallback 到系统设置值，1rem就不是你预期的 16px - 没统一
box-sizing？width: 100%的卡片加上padding: 16px就会撑出父容器，Flex/Grid 布局直接错位 -
button和input默认height、line-height、vertical-align不一致？表单控件在媒体查询切换时高度跳变，响应式对齐全乱
别用 * { margin: 0; padding: 0 }，它会让响应式更难调
通配符暴力重置表面干净，实则埋雷：
-
button内部默认padding被清零 → 点击热区收缩，触控体验降级 -
input[type="search"]的清除按钮、textarea的滚动条内边距丢失 → 用户输入时文字贴边，可访问性受损 - 所有伪元素（
::before/::after）也归零 → 你写的响应式图标、装饰性内容可能意外消失 - 现代项目若已用 Tailwind CSS，其
preflight已含 normalize 逻辑，再叠reset.css会导致font-size、line-height多次覆盖，最终值不可预测
真正该做的：用最小侵入方式守住响应式基线
不需要整套 Eric Meyer Reset，重点守住三处：
- 盒模型必须统一：
*, *::before, *::after { box-sizing: border-box }—— 否则任何带padding的响应式容器都会超宽 - 基础流式元素清 margin/padding：
h1, h2, p, ul, ol, dl, pre, blockquote { margin: 0; padding: 0 }，但保留li的display和语义行为 - 字体与行高克制初始化：
body { font-size: 1rem; line-height: 1.5 }，不锁死html的font-size，留给媒体查询动态调整空间
最易被忽略的是：重置必须发生在所有响应式断点规则之前，否则 @media (max-width: 768px) 里的 font-size 调整，会被未重置的浏览器默认 h1 行高干扰，导致文字在小屏上挤成一团。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
