CSS 样式初始化的必要性

问题

为什么要初始化 CSS 样式？

解答

浏览器默认样式差异

不同浏览器对 HTML 元素有不同的默认样式。例如：

/* Chrome 默认 */
body {
  margin: 8px;
}

/* Firefox 的 button */
button {
  padding: 0 8px;
}

/* Safari 的 input */
input {
  padding: 1px;
}

这会导致同一页面在不同浏览器中显示不一致。

常见初始化方案

1. Reset CSS（暴力重置）

/* 清除所有默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul, ol {
  list-style: none;
}

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

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

button, input, textarea {
  font: inherit;
  border: none;
  outline: none;
  background: none;
}

table {
  border-collapse: collapse;
}

2. Normalize.css（保留有用默认值）

/* 修复而非清除，保留合理默认值 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* 统一不同浏览器的表单元素 */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

3. 现代简化方案

/* 推荐的现代初始化 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* 防止 iOS 横屏时字体放大 */
  -webkit-text-size-adjust: 100%;
}

body {
  /* 优化字体渲染 */
  -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;
}

/* 避免文字溢出 */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

Reset vs Normalize 对比

特点	Reset CSS	Normalize.css
思路	清除所有默认样式	修复差异，保留合理默认
体积	较小	较大
适用	完全自定义设计	需要保留语义化样式

关键点

• 浏览器默认样式不统一，需要初始化保证一致性
• Reset CSS 暴力清除所有样式，Normalize.css 保留有用默认值
• box-sizing: border-box 是现代布局的基础
• 表单元素默认不继承字体，需要手动设置 font: inherit
• 根据项目需求选择方案，现代项目推荐简化版 + 按需补充