normalize.css 是响应式布局的基础设施，它保留语义元素默认行为、修复跨浏览器差异、维持字号层级与缩进，而通配符重置会破坏这些关键支撑。
别用 * { margin: 0; padding: 0; } 做响应式布局的起点——它会让 input 失去内边距、select 在 iOS 上消失箭头、h1–h6 全部退化成一样大小，而且拖慢渲染。
为什么 normalize.css 比通配符重置更适配响应式布局
响应式布局依赖浏览器对语义元素的默认行为（比如 ul 的缩进、button 的聚焦轮廓、img 的垂直对齐），而 * { ... } 一刀切地破坏了这些基础支撑。
-
normalize.css保留h1–h6的字号层级，只统一上下margin，这对流体排版中的视觉节奏很关键 - 它修复了 Firefox 和 Safari 对
ul缩进的实现差异，但不抹掉padding-left——这意味着媒体查询里改容器宽度时，列表项不会意外贴边 -
input、textarea、button在各端保持一致的line-height和font-size，避免在小屏上文字被截断或控件高度塌陷 - 引入只需一行：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">，且必须放在你自己的 CSS 文件之前
响应式项目中真正该手动重置的 5 类样式
全局重置不是“清空”，而是“校准”。只动影响流体行为的关键节点：
-
body：仅重置margin（Chrome/Firefox 是8px，IE 是10px），其他继承属性不动 -
h1–h6、p、blockquote：只设margin-top和margin-bottom，保留font-size和语义 -
ul、ol、li：只加list-style: none，不碰padding；需要清空缩进时，单独用padding-inline-start: 0 -
a：移除text-decoration，但保留color: inherit，否则深色主题下链接会不可见 -
img：设vertical-align: middle，现代浏览器已默认无边框，不用写border: 0
box-sizing: border-box 必须加，但别套在 * 上
响应式布局里用百分比 + 内边距是常态，box-sizing: border-box 能让 width: 100% 真正包含 padding。但它不该和 * { margin: 0; padding: 0; } 绑定使用——前者有用，后者有害。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
*, *::before, *::after { box-sizing: border-box; }，安全覆盖所有伪元素 - 绝对不要给
input或textarea强制box-sizing: content-box，它们原生就是border-box，改了反而导致 iOS 键盘弹出时布局跳动 - 如果用了 CSS-in-JS 或 Shadow DOM，需在组件内部显式设置，因为
inherit不会穿透封装边界
最常被忽略的一点：normalize.css 不是“可选优化”，它是响应式布局的基础设施——就像 <meta name="viewport"> 一样，漏掉就等于没起步。
