直接写 margin: 0; padding: 0; 不够用，因浏览器对不同标签默认样式差异大，漏掉 blockquote 左边距、input 圆角、textarea 缩放手柄等细节，导致布局错位。
为什么直接写 margin: 0; padding: 0; 不够用
浏览器对不同标签（比如 h1、ul、button）自带的默认样式差异很大，有些还带 font-weight、line-height、list-style 等隐性规则。只清 margin 和 padding，会漏掉 blockquote 的左边界、input 的边框圆角、textarea 的可缩放手柄等实际干扰布局的细节。
常见错误现象：ul 列表左边仍有缩进，button 在 Chrome 和 Safari 中高度不一致，h1 行高在 Firefox 中比预期高。
- 现代项目建议用
* { all: unset; }+ 逐元素重设，但兼容性差（IE 不支持all） - 更稳妥的是基于
html或body做根级重置，再针对性恢复需要的默认行为 - 注意
fieldset、legend、details这类语义化标签的默认样式容易被忽略
推荐用 modern-normalize 而不是 reset.css
reset.css（如 Eric Meyer 版）会把所有标签样式暴力归零，导致 em 失去斜体、strong 失去加粗、table 完全坍缩——你得手动补回一堆基础样式，反而增加维护成本。
modern-normalize 是轻量替代方案，它只标准化跨浏览器差异，保留合理的默认语义表现：
- 统一
button、input、select的盒模型和字体继承 - 修复
sub/sup在 Safari 中的垂直对齐问题 - 让
pre在所有浏览器中保持white-space: pre - 不碰
font-weight、color、text-decoration等语义相关属性
使用方式很简单：
@import 'modern-normalize';
或通过 CDN 引入，放在自定义 CSS 最上方。
box-sizing: border-box 必须全局生效
这是 Reset 过程中最容易被跳过的一步。浏览器默认是 content-box，导致设置 width: 100px + padding: 10px + border: 1px 后实际占宽 122px，布局极易错位。
正确做法是立即在根上锁定：
*,
*::before,
*::after {
box-sizing: border-box;
}
- 不要只写
* { box-sizing: border-box; }，遗漏伪元素会导致::before插入图标时尺寸失控 - 某些 UI 库（如 Bootstrap）内部已设此规则，重复设置无害但冗余
- 旧版 Android Browser（4.3 及以下）不支持
*::before选择器，如需兼容需单独补丁
自定义 Reset 里最容易漏掉的三个地方
自己写 Reset 时，多数人只盯着文字和盒模型，却忽略这三类“静默干扰项”：
-
img默认是inline元素，底部有空白间隙 → 加vertical-align: middle或设display: block -
button、input[type="button"]默认有cursor: pointer，但select没有 → 统一加cursor: pointer避免交互不一致 -
textarea默认可拖拽缩放 → 加resize: vertical（或none）明确控制，否则用户拉扯后破坏响应式布局
这些点不报错，也不影响功能，但会让像素级还原设计稿变得困难，而且越往后越难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
