<p>CSS重置是响应式开发前提，因* { margin: 0; padding: 0 }会破坏语义元素行为、拖慢解析，且未覆盖伪元素box-sizing；应精准重置关键属性，优先使用Normalize.css并确保其在head中首个加载。</p>
CSS重置不是响应式开发的“附加项”，而是前提——没它，max-width: 100% 和 flex 布局在 Safari 旧版或 IE11 里可能根本不对齐。
为什么 * { margin: 0; padding: 0 } 在响应式项目里反而危险
这个写法看似简单，但会破坏现代响应式组件的默认行为：比如 fieldset 的边框间距、details 的折叠动画、button 的可访问性 focus 样式。更关键的是，通配符选择器在移动端高密度 DOM 下会拖慢 CSS 解析速度，实测在 iOS Safari 中影响首屏渲染约 8–12ms。
响应式项目真正需要的不是“全清零”，而是“精准归一”：
- 只重置影响流式布局的关键属性（
margin、padding、box-sizing） - 保留语义化元素的默认可访问行为（如
input:focus、summary展开状态） - 显式声明
viewport兼容性相关的重置（如-webkit-text-size-adjust）
box-sizing: border-box 必须作用于伪元素
响应式中用 calc() 或栅格计算宽度时，如果 ::before 或 ::after 没继承 border-box，它们的尺寸会按 content-box 计算，导致视觉错位。Chrome 和 Firefox 默认如此，Safari 15.4+ 才统一支持。
立即学习“前端免费学习笔记（深入）”；
正确写法必须包含伪元素：
*, *::before, *::after {
box-sizing: border-box;
}漏掉 *::before, *::after 是很多响应式网格塌陷的隐藏原因——尤其在使用 grid-template-areas 配合伪元素做装饰时。
表格和表单元素的重置要单独处理
响应式表格常被 overflow-x: auto 包裹，但不同浏览器对 table 的默认 border-spacing 和 caption-side 处理不一致，导致横向滚动条位置偏移。同理，input[type="number"] 在 Safari 中有默认 spinner，Firefox 则无，直接重置会丢失用户交互预期。
推荐最小化重置规则：
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 0.75em;
}
input, select, textarea, button {
font: inherit;
line-height: 1.5;
margin: 0;
}注意：font: inherit 比 font-family: inherit 更安全——它同时继承 font-size 和 line-height，避免移动端文字缩放失效。
Normalize.css 比 Reset 更适合响应式项目
纯粹重置会把 small 标签字号设为 100%，但响应式设计中它本该是 80%；sub/sup 的垂直对齐在移动端容易溢出容器。Normalize.css 修复了这些细节，且明确标注哪些规则针对移动设备（如修正 iOS click 延迟、Android 表单聚焦缩放）。
使用时务必注意加载顺序：
- 在
<head>中，normalize.css必须在所有自定义 CSS 之前 - 不要用
@import引入，它会阻塞渲染；改用<link rel="stylesheet"> - 若用构建工具，确保它不被 CSS-in-JS 库（如 Emotion）的样式隔离机制剥离
最易被忽略的一点：Normalize.css 不处理 prefers-reduced-motion 或 color-scheme，这些响应式必备的媒体查询需手动补全。
