更改浏览器默认样式

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

body {
  /* 3. Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/*
  9. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

接下来每条来解释为什么这样做

  1. 盒模型

  2. 去除默认边距
    默认情况下， h1 将比段落包含更多的边距。

  3. 添加可访问的行高
    line-height 控制段落中每行文本之间的垂直间距。默认值因浏览器而异，但通常在 1.2 左右。

  4. 改进文本渲染
    这个有点争议。
    在 2018 年发布的 macOS Mojave 中， Apple禁用了整个操作系统的子像素抗锯齿功能。 令人困惑的是，Chrome 和 Safari 等 macOS 浏览器默认情况下仍然使用子像素抗锯齿。我们需要通过将-webkit-font-smoothing 设置为 antialiased 来显式关闭它。
    macOS 是唯一使用子像素抗锯齿的操作系统，因此此规则对 Windows、Linux 或移动设备没有影响。

  5. 改进媒体默认设置
    图像被认为是“内联”元素。这与我们大多数时候使用图像的方式并不相符。通常，对待图像的方式与对待段落、标题或侧边栏的方式相同；它们是布局元素

  6. 继承表单控件的字体
    这是另一个奇怪的事情：默认情况下，按钮和输入不会从其父级继承样式。相反，他们有自己奇怪的风格。

  7. 避免文本溢出
    在 CSS 中，如果没有足够的空间容纳单行上的所有字符，文本将自动换行。如果一行没有任何软换行机会，并且不适合，则会导致文本溢出：

  8. 改善换行
    当单行文本中的单词过多时，默认行为是将不适合的单词推送到下一行。重复此过程，直到没有任何行溢出：
    对于段落，我使用 pretty 选项。该算法将确保文本的最后一行至少有两个单词。它还进行了其他细微的调整以改善段落的视觉平衡：
    对于标题，我使用 balance 选项。这具有更强的效果；该算法试图使每行文本的长度大致相同。这往往会让两行标题感觉更加平衡。

  9. 根堆叠上下文
    最后一项是可选的。通常只有当您使用像 React 这样的 JS 框架时才需要它。
    isolation 属性允许我们创建一个新的堆栈上下文，而无需设置 z-index 。
    这是有益的，因为它允许我们保证某些高优先级元素（模式、下拉菜单、工具提示）始终显示在应用程序中的其他元素之上。没有奇怪的堆叠上下文错误，没有 z-index 军备竞赛。
    您应该调整选择器以匹配您的框架。我们想要选择您的应用程序在其中呈现的顶级元素。例如， create-react-app 使用

    ，因此正确的选择器是#root 。

    原文