现代CSS样式重置最佳实践！（上）https://developer.aliyun.com/article/1411402
5. 平滑字体
body { -webkit-font-smoothing: antialiased; }
在 MacOS 电脑上，浏览器默认使用“亚像素抗锯齿”。 这是一种旨在通过利用每个像素内的 R/G/B 光使文本更易于阅读的技术。过去，这被视为可访问性的胜利，因为它提高了文本对比度。
在 2018 年发布的 MacOS Mojave 中，Apple 禁用了整个操作系统的亚像素抗锯齿功能。然而，像 Chrome 和 Safari 这样的 MacOS 浏览器默认情况下仍然使用子像素抗锯齿。 我们需要通过将 -webkit-font-smoothing 设置为 antialiased 来关闭它。
下图中，左侧是关闭之后的效果：
MacOS 是唯一使用子像素抗锯齿的操作系统，因此此规则对 Windows、Linux 或移动设备并没有影响。 如果使用的是 MacOS 计算机，则可以比较两者的实时渲染（没有使用CSS重置）：
p { -webkit-font-smoothing: subpixel-antialiased; font-family: sans-serif; } .antialiased { -webkit-font-smoothing: antialiased; }
效果如下：
6. 媒体默认值
img, picture, video, canvas, svg { display: block; max-width: 100%; }
在 HTML 中，图像被认为是内联元素。这意味着它应该用在段落中间，像 或 一样。这与大多数时候使用图像的方式不一致。 通常，对待图像的方式与对待段落、标题的方式相同，都是布局元素。
但是，如果尝试在布局中使用内联元素，就会发生奇怪的事情。 如果你曾经有过一个神秘的 4px 间隙，它不是padding、margin或border，它可能是浏览器用行高添加的内联空间。
通过给图片设置 display: block 就避免了这种问题。除此之外，还设置了max-width: 100%。这样做是为了防止大图溢出，如果它们被放置在了一个不够宽的容器中。大多数块级元素会自动增长/收缩以适应其父元素，但像
如果图像的原始尺寸为 800×600，即使将其放入宽度为 500px 的父元素中，其宽度也将是 800px。这条规则将防止该图像超出其容器，这可能是更明智的默认行为。
7. 继承表单控件的字体
input, button, textarea, select { font: inherit; }
默认情况下，按钮和输入框不会从其父元素继承排版样式。 相反，它们有自己的怪异风格。例如，</code> 将使用系统默认的等宽字体。<code>input</code> 输入将使用系统默认的无衬线字体。 两者都将选择很小的字体大小（在 Chrome 中为 13.333px）。在移动设备上阅读 13 px 的文本会很困难。 当聚焦一个小字体的 input 时，浏览器会自动放大，让文本更容易阅读。</div><div>这是一个不太好的体验</div><div>如果想要避免这种自动缩放行为，输入的字体大小至少需要 1rem / 16px。 下面是解决该问题的一种方法：</div><div><span><br /></span></div><pre><code><span>input</span>, <span>button</span>, <span>textarea</span>, select { <span> <span>font-size</span>: <span>1rem</span>;</span> <span>}</span> </code></pre><div>这的确解决了自动缩放问题，但这这是表面上的。 这个问题的根本原因是：<strong>表单输入不应该有自己的排版样式</strong>。</div><div><span><br /></span></div><pre><code><span>input</span>, <span>button</span>, <span>textarea</span>, select { <span> <span>font</span>: inherit;</span> <span>}</span> </code></pre><div>font 是一种很少使用的速记，它设置了一些与字体相关的属性，如 <code>font-size</code>、<code>font-weight</code>、<code>font-family</code>。 通过将其设置为 <code>inherit</code>，就指定这些元素与其周围环境中的排版相匹配。只要不为正文设置很小的字体，这样做就可以解决这些问题。</div><div><br /></div><h2 id="tGVgG">8. 自动换行</h2><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22p%2C%20h1%2C%20h2%2C%20h3%2C%20h4%2C%20h5%2C%20h6%20%7B%5Cn%20%20overflow-wrap%3A%20break-word%3B%5Cn%7D%5Cn%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22vJV54%22%7D"></div><div>在 CSS 中，如果一行中没有足够的空间容纳所有字符，文本将自动换行。默认情况下，算法会寻找“软换行”的机会，这些是算法可以拆分的字符。 在英语中，唯一的软换行机会就是空格和连字符，但这因语言而异。</div><div>如果一行中没有任何软换行机会，并且它不适合换行，就会导致文本溢出：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fyjbvedpo6nmku_c3174f82b019496a8f7237c8dd841c35.jpg%22%2C%22originWidth%22%3A1336%2C%22originHeight%22%3A688%2C%22name%22%3A%228.webp.jpg%22%2C%22size%22%3A155183%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A1336%2C%22height%22%3A688%7D"></span></div><div>这可能会导致出现水平滚动条，也可能会导致文本与其他元素重叠，或者滑到图像/视频后面。</div><div><code>overflow-wrap</code> 属性可以调整换行算法，并允许它在找不到软换行机会时使用硬换行：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fyjbvedpo6nmku_c9ca0101af784a7ea84491d96acb62db.jpg%22%2C%22originWidth%22%3A1334%2C%22originHeight%22%3A780%2C%22name%22%3A%228.webp%20(1).jpg%22%2C%22size%22%3A209212%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A1334%2C%22height%22%3A780%7D"></span></div><div>除此之外，还可以尝试添加 hyphens 属性：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22p%20%7B%5Cn%20%20overflow-wrap%3A%20break-word%3B%5Cn%20%20hyphens%3A%20auto%3B%5Cn%7D%5Cn%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22CXXPk%22%7D"></div><div>hyphens: auto 使用连字符（在支持它的语言中）来指定硬换行，它使硬换行更加普遍。如果文本列非常窄，这可能是值得的，但它也可能有点分散注意力。所以并没有将其包含在重置中，但值得一试！</div><div><br /></div><h2 id="04g1p">9. 根层叠上下文</h2><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%23root%2C%20%23__next%20%7B%5Cn%20%20isolation%3A%20isolate%3B%5Cn%7D%5Cn%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22WwU7m%22%7D"></div><div>这一项是是可选的。 通常只有在使用像 React 这样的 JavaScript 框架时才需要它。isolation 属性允我们创建一个新的层叠上下文，而无需设置 z-index。这就可以保证某些高优先级元素（例如模态框、下拉菜单、tooltip）将始终显示在应用中的其他元素之上。</div><div>我们需要根据使用的框架来调整选择器，该选择器选择的是应用中渲染的顶级元素。例如，<code>create-react-app</code> 使用的是 <code><div id="root"></code>，所以应该使用选择器<code>#root</code>。</div><div>最后，再来看一下这些重置样式的完整代码，可以将其复制/粘贴到自己的项目中：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%5Cn*%2C%20*%3A%3Abefore%2C%20*%3A%3Aafter%20%7B%5Cn%20%20box-sizing%3A%20border-box%3B%5Cn%7D%5Cn*%20%7B%5Cn%20%20margin%3A%200%3B%5Cn%7D%5Cnhtml%2C%20body%20%7B%5Cn%20%20height%3A%20100%25%3B%5Cn%7D%5Cnbody%20%7B%5Cn%20%20line-height%3A%201.5%3B%5Cn%20%20-webkit-font-smoothing%3A%20antialiased%3B%5Cn%7D%5Cnimg%2C%20picture%2C%20video%2C%20canvas%2C%20svg%20%7B%5Cn%20%20display%3A%20block%3B%5Cn%20%20max-width%3A%20100%25%3B%5Cn%7D%5Cninput%2C%20button%2C%20textarea%2C%20select%20%7B%5Cn%20%20font%3A%20inherit%3B%5Cn%7D%5Cnp%2C%20h1%2C%20h2%2C%20h3%2C%20h4%2C%20h5%2C%20h6%20%7B%5Cn%20%20overflow-wrap%3A%20break-word%3B%5Cn%7D%5Cn%23root%2C%20%23__next%20%7B%5Cn%20%20isolation%3A%20isolate%3B%5Cn%7D%5Cn%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%225yF6Y%22%7D"></div><blockquote><div><strong>参考文章：</strong><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.joshwcomeau.com%2Fcss%2Fcustom-css-reset%2F" target="_blank" ref="nofollow noopener noreferrer">www.joshwcomeau.com/css/custom-…</a></div></blockquote>
