normalize.css 不设 box-sizing，默认保持 content-box；reset.css 通常全局设为 border-box，二者盒模型处理逻辑相反，不可共存，否则引发覆盖冲突与布局异常。
box-sizing 默认值不一致，Normalize 不设，Reset 常设为 border-box
Normalize.css 从不修改 box-sizing 的默认行为——它让每个元素保持浏览器原生设定（content-box），只在必要处局部修正。而多数 Reset.css（如 Eric Meyer 版）会在全局强制设置 * { box-sizing: border-box; }，这是最显著的盒模型分歧点。
这种差异直接影响布局稳定性：
- 用 Normalize 时，
width: 100%+padding在旧版 IE8 或 Android 4.4 WebView 中会溢出容器，必须手动加box-sizing: border-box - 用 Reset 时，所有元素都走
border-box，但某些语义化元素（如textarea、select）在 Safari 中可能因内建渲染逻辑与border-box冲突，导致光标错位或缩放异常 - 现代项目若搭配 CSS-in-JS 或 Tailwind，默认已启用
border-box全局重置，此时再引入 Reset 的重复规则会增加解析开销
margin/padding 处理逻辑不同：保留 vs 归零
盒模型的外延表现，核心落在 margin 和 padding 上。Normalize.css 对段落、标题、列表等保留合理间距，例如 p 仍带 margin-bottom: 1em；Reset.css 则一律设为 0。
这意味着：
- 直接用 Reset 后写
.card { padding: 16px; }，你会发现文字紧贴边框——因为h3、p等子元素的默认margin已被清空，不再撑开内部空间 - Normalize 下，
blockquote仍带左右margin，你只需微调，不用重写整个块级结构 - 表单控件如
input[type="text"]在 Normalize 中保留了各浏览器默认padding（Chrome 是 1px 4px，Safari 是 2px 5px），Reset 则统一归零，后续必须手动补全可读性所需的内边距
为什么不能同时用 Normalize + Reset 处理盒模型
两者对同一属性的处理方向相反，叠加后极易引发覆盖和不可预测行为：
-
body的margin：Reset 设为0，Normalize 保留8px（Firefox/Chrome）或0（Safari），最终结果取决于 CSS 加载顺序和 specificity -
button的padding：Reset 清零，Normalize 保留 3–6px 差异，若 Reset 后加载 Normalize，按钮可能突然“膨胀” - 更隐蔽的是
box-sizing：某些 Reset 变体只写* { box-sizing: border-box; }，而 Normalize v8+ 完全不碰该属性；但若构建工具自动注入 legacy 插件，可能悄悄插入html { box-sizing: content-box; }，造成整页盒模型混乱
自己写轻量盒模型重置时，这三行不能少
不引入整套库，又想兼顾兼容与可控，建议在自定义基础样式开头加：
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
}
input, button, select, textarea {
margin: 0;
padding: 0.375em 0.75em;
}
注意：padding 值用了 em 单位，确保在用户调整字号时仍可读；input 等控件没设 font-family 或 line-height，是刻意留给 Normalize 处理——它会按平台自动匹配 -apple-system 或 "Segoe UI"，硬写死反而破坏可访问性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
