在前端开发中，我们经常会遇到 CSS Reset 的使用。CSS Reset 的作用是使得不同浏览器的样式表现更加一致。但是，这同时也会带来一个问题：CSS Reset 会改变页面元素的默认样式，导致行高问题的出现。在本文中，我们将讨论如何处理 CSS Reset 导致的行高问题。
什么是行高？
行高是指文本行的高度，是由行内元素尺寸、字体和行距三个因素共同决定的。
- 行内元素尺寸：行内元素的尺寸会影响行高的大小，例如设置了行内元素的高度或行内块元素宽高都是有可能影响行高的。
- 字体：字体大小对行高起着重要作用，因为行高是以字体的基线为基础计算的。
- 行距（line-height）：行距是指文本行之间的距离，通常用百分比或像素来定义。
CSS Reset 对行高的影响
CSS Reset 会将页面元素的默认样式重置为统一的样式。在这个过程中，行高是其中一个受影响的元素。由于 CSS Reset 对文本元素的默认样式进行了重置，这往往会导致文本元素高度的变化，进而影响到行高的大小。
下面是一个简单的 CSS Reset 示例：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}在该示例中，我们将所有元素的 margin 和 padding 设置为 0 ，并将 box-sizing 设置为 border-box 。这样做的目的是使得不同浏览器之间的元素表现更加一致，但是同时也改变了文本元素的默认样式，导致行高问题的出现。
如何解决行高问题
解决行高问题的方法有很多，以下是一些常见的方法：
1. 使用 normalize.css
normalize.css 是一款 CSS Reset 库，不同于传统的 CSS Reset，normalize.css 只针对不同浏览器之间的默认样式进行了修正和统一，不对元素的默认样式进行完全的重置。这种修正不会对行高等重要样式造成影响，也就不会有行高问题的出现。因此使用 normalize.css 是解决行高问题的比较好的选择。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
2. 自定义文本元素的样式
自定义文本元素的样式可以避免受到 CSS Reset 的影响，从而解决行高问题。
-- -------------------- ---- ------- ---- - ---------- ----- ------------ ---- - --- --- --- --- --- -- - ------------ ---- ------------ ---- -
在该示例中，我们对文本元素的样式进行了自定义，避免了受到 CSS Reset 的影响，从而确保了行高的正确性。
3. 使用 CSS Variables
使用 CSS Variables 可以简化代码，减少冗余，并且解决行高问题。CSS Variables 可以在作用域内声明一些自定义属性，并赋予他们特定的值。
以下是一个使用 CSS Variables 的示例：
-- -------------------- ---- -------
----- -
------------ -----
-------------- ----
-
---- -
---------- -----------------
------------ -------------------
-在该示例中，我们创建了两个自定义变量 --font-size 和 --line-height 并指定值。在需要使用对应值的地方，可以使用 var() 函数调用对应的变量。
总结
处理 CSS Reset 导致的行高问题是一项非常重要的工作，它关系到文本元素的布局和显示效果。本文介绍了三种解决行高问题的方法，其中最佳的选择是使用 normalize.css 库。当然，做出适合自己项目的处理方法非常重要，对于开发者而言每个项目只有本身的特点，没有固定的套路方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653b28047d4982a6eb57c599