CSS重置

如今的浏览器在呈现HTML方面要好得多，因此过去的CSS重置在大多数情况下已经不再必要。然而，默认的浏览器样式在大多数情况下并不是特别好，这就是为什么有很多CSS重置存在的原因。在从其中一些中汲取灵感的基础上，这是我的主观CSS重置，以及我选择包含每个规则的解释。

html {
  max-width: 70ch;
  margin: auto;
  padding: 3em 1em;
  font-family: system-ui, 'Segoe UI', Roboto, Cantarell,
    'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.25em;
  line-height: 1.75;
}

body {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 3em 0 1em;
}

p, ul, ol {
  margin-bottom: 2em;
  color: #1d1d1d;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

```css
pre, code, kbd {
  font-family: monospace, monospace;
  font-size: 1em;
}

• html:
• max-width - 使用ch单位设置最大宽度，使其位于最佳可读范围的中间位置（60-80个字符）。
• margin - 将内容居中显示在页面上。
• padding - 防止在较小的视口上出现边到边的文本。
• font-family - 使用系统字体堆栈以确保最佳的字体渲染效果。system-ui是一个新的通用字体系列，取代了-apple-system和BlinkMacSystemFont。
• font-size - 使用较大的字体大小以提高可读性，并跟上最近的设计趋势。
• line-height - 使用较大的行高以增加视觉清晰度。
• body: margin - 在所有浏览器中移除默认的边距。
• h1-h6:
• margin - 对于标题使用较大的边距以改善视觉层次结构。
• p, ul, ol:
• margin-bottom - 在文本元素之间添加间距。
• color - 降低文本颜色的亮度以提高可读性。
• small:
• font-size - 修正不同浏览器之间的字体大小差异。
• sub, sup:
• font-size - 修正不同浏览器之间的字体大小差异。
• line-height - 防止元素影响行高。
• position - 相对于父元素定位元素。
• vertical-align - 将元素与基线对齐。
• bottom, top - 正确地定位元素。
• pre, code, kbd:
• font-family - 对于代码元素使用等宽字体。
• font-size - 修正不同浏览器之间的字体大小差异。