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-systemBlinkMacSystemFont
  • 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 - 修正不同浏览器之间的字体大小差异。