在前端开发的过程中，HTML 和 CSS 的重要性毋庸置疑。HTML 是用来组织文本内容，而 CSS 用来控制网页的外观、排版等方面。HTML 中的文本内容如果没有经过 CSS 的修饰，那么它将呈现出默认的样式，这往往与我们的设计要求不符。为了解决这个问题，我们需要借助 CSS 来修改这些默认样式，其中 CSS Reset 和行高是两个非常重要的方面。
CSS Reset 是什么？
CSS Reset 是一种用来重置 HTML 元素默认样式的方式。因为不同的浏览器对于 HTML 的默认样式存在差异，这对于前端开发者而言是一件非常麻烦的事情。如果不进行重置，那么不同浏览器之间的表现将存在差异，导致我们的网页看起来非常不一致。
CSS Reset 的目的在于通过一个全局的 CSS 规则，统一不同浏览器与不同 HTML 元素的默认样式。通常基于 reset.css 或 normalize.css 进行开发。
reset.css
reset.css 是一种常见的 CSS Reset 方式，其核心思想是“重置一切”。通过在 CSS 中设置全局的样式，使得页面元素的默认样式统一。例如：
- - ------- -- -------- -- -
这段 CSS 表示将所有的 HTML 元素的 margin 和 padding 的值都设置为 0，从而消除了他们的默认间距等效果。当然，reset.css 还涉及到对元素的颜色、字体、大小等等的重置。
normalize.css
由于 reset.css 的“重置一切”的思路可能过于过激，可能影响到某些页面的布局。因此，normalize.css 是另一种方案，其核心思想是“一切皆有所表现”。即通过 CSS 代码让 HTML 标签在不同的浏览器中表现一致。相比 reset.css，normalize.css 加强了 HTML5 标签的样式，使得页面更加美观易维护。
行高的设置
除了 CSS Reset，行高也是在前端开发中一项非常重要的技术。行高是指线框高度，是指在文本行的顶部和底部之间的距离。在 CSS 中，行高是一个容易被忽略的设置项，但是它对于网页的美观和易读性有很大的影响。
行高的单位
行高的单位有多种，包括像素、百分比、em 和 rem 等等。其中像素和百分比是最常见的单位，前者适合于固定文本高度，后者可以根据容器的大小自适应调整。例如：
- - ------------ ----- -- --- -- -- -- - --- - ------------ ----- -- --- --------- ---- ---- -- -
行高和字体大小的比例
在 CSS 中，行高和字体大小的比例很大程度上影响了文本阅读体验。行高越大，文本看起来就越方便阅读；但是如果行高过大，文本之间的距离会产生很大的间隔，影响排版美观。因此，需要在设计中找到一个合适的比例值。
根据一些实践经验，一般将行高设置为字体大小的 1.5-2 倍之间。例如：
---- - ---------- ----- ------------ ------ -
在设计中，为了更好地掌握行高与字体大小的比例，可以尝试使用像 Sketch、Figma 等设计工具中自带的“Line Height Ratio”插件，可视化地调整行高。
总结
CSS Reset 和行高是前端常用的两个技术，不仅在排版美观和易读性方面有着重要的作用，同时也能提高网页的跨浏览器兼容性。希望通过本文，读者可以更加深入地了解这两个技术，进而在日常的开发工作中运用自如。
示例代码
使用 normalize.css 进行重置：
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ---------------- --
-------------------- ---------------
----- ---------------- ------------------------------------------------------------------------------- --
-------
-- -- --- -- --
--------
-------
------
---- ---- -- ---
-------
-------设置行高：
------- -
---------- -----
------------ ----
-来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64684289968c7c53b08753a5