CSS Reset 与 Normalize

为什么需要 Reset

不同浏览器有不同的用户代理样式表（User Agent Stylesheet），对元素的默认样式有不同的定义。如果不进行任何处理，同一个 HTML 在不同浏览器中可能呈现不同的外观。

CSS Reset 的目的是消除浏览器默认样式差异，建立一个跨浏览器一致的基础样式。

面试定位：CSS Reset 不是高频面试考点，但理解 Reset 和 Normalize 的设计哲学、以及现代最佳实践，反映了候选人对 CSS 跨浏览器一致性的重视程度。

CSS Reset 的演进

传统 Reset（2000年代）

/* 最原始的 Reset */
* {
  margin: 0;
  padding: 0;
}

问题：过于激进，丢失了所有默认样式（包括有用的样式），导致需要重新定义很多基础样式。

YUI Reset（2008）

/* YUI 3 Reset */
html {
  color: #000;
  background: #FFF;
}
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, code, form, fieldset, legend,
input, button, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset, img {
  border: 0;
}

Normalize.css

Normalize.css 的设计哲学是保留有用的默认样式，只消除跨浏览器差异：

/* Normalize 的核心思想 */
html {
  line-height: 1.5; /* 保留有用的默认样式 */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0; /* 但消除不一致的默认 margin */
}

/* 跨浏览器一致性修复 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 统一字体继承 */
  font-size: 100%;
}

现代 CSS Reset（2020+）

Modern CSS Reset 的核心要素

/* 1. box-sizing: border-box */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. 移除默认 margin */
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

/* 3. 移除列表默认样式 */
ul, ol {
  list-style: none;
  padding: 0;
}

/* 4. 字体平滑 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 5. 表单元素 */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* 6. 媒体元素 */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. 无障碍 */
a {
  color: inherit;
  text-decoration: none;
}

Sanitize.css

Sanitize.css 是一个更全面的现代 Reset，它整合了 Normalize 的跨浏览器一致性修复和 Reset 的样式重置：

/* sanitize.css 核心内容 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

img, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

实战：构建项目 Reset

基础项目 Reset

/* === RESET === */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

特定项目需求的 Reset

/* 设计系统项目：保留部分语义样式 */
body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
}

/* 组件库项目：更激进的 Reset */
.component-lib * {
  margin: 0;
  padding: 0;
  font: inherit;
}

面试高频问题

Q: Reset 和 Normalize 有什么区别？

回答要点：Reset 激进地清除所有默认样式（包括有用的），让所有元素从零开始；Normalize 保留有用的默认样式，只消除跨浏览器的不一致差异。Normalize 的哲学是"修复差异，保留价值"。

Q: 为什么推荐 box-sizing: border-box？

回答要点：box-sizing: border-box 让 width/height 包含 padding 和 border，计算更符合直觉。当设计稿标注"宽 200px"时，border-box 能确保元素就是 200px，不会因 padding 或 border 膨胀。

Q: 现代 CSS Reset 还需要保留哪些默认样式？

回答要点：现代 Reset 应该保留：body 的 line-height（可读性基础）、表单元素的 font: inherit（确保字体继承）、图片的 max-width: 100%（响应式图片）等。同时应该设置 font-smoothing 属性提升字体渲染质量。