在进行前端开发时，我们必须面对各种不同的浏览器，不同的浏览器对文本样式的默认值也有所不同。这往往导致同一段代码在不同的浏览器中呈现不同的效果，用户体验大打折扣。为了统一文本样式，我们可以采用 CSS Reset 的方式来清除默认的样式。
什么是 CSS Reset
CSS Reset 是一种让所有浏览器的默认样式表一致化的技术方案。它在网页的样式表中添加了一系列 CSS 规则，用来清除所有浏览器的默认样式，让所有的元素在各个浏览器中都有一致的表现。
CSS Reset 的诞生是为了解决浏览器之间默认样式的差异化带来的问题。通过一次清除各浏览器的默认样式，再用我们自己的样式来控制标签的表现，从而达到一致的视觉效果。使用 CSS Reset 可以避免很多开发时的坑爹问题，对于开发者来说可是省了不少心思。
CSS Reset 的实现方式
实现 CSS Reset 的方式有很多，最常见的 CSS Reset 是重置所有样式，让它们回到浏览器默认的样式。常见的 CSS Reset 包括了：
- Meyer’s CSS Reset
- Eric Meyer’s Reset CSS
- HTML5 Reset Stylesheet
- Normalize.css
这些 Reset 针对不同的问题和需求提供了漂亮的通用样式库或者可自定义的 CSS 文件。在实际开发过程中，选择一款适合自己的 Reset 是非常有必要的。
Meyer’s CSS Reset 实例
在本文中，我们将采用 Meyer’s CSS Reset 这个 Reset 方案进行样式的清除。下面是一个简单的 Meyer’s CSS Reset 实现：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ -
这段 CSS 代码清除了很多浏览器默认的样式，设置了所有元素的 font-size 为 100%（这意味着所有元素都是继承自其父元素的字体大小），同时将 margin、padding、border、outline 等属性设为 0 。
实现效果
下面我们通过一个例子来看看使用 CSS Reset 前后的效果差别。
使用 CSS Reset 前：
<p>Hello，我是一段默认文本。</p>
在不同的浏览器中，这段代码的输出效果可能有所不同，如下图所示。
使用 CSS Reset 后：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- ---- - --------------
-------
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ----- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
----------- ------------
-
--------
-------
------
----------------------
-------
-------当对这段代码进行 Reset 后，它在各种浏览器中表现基本一致，效果如下图所示。
总结
使用 CSS Reset 可以使得网页在不同的浏览器中有一致的展示效果，增强用户体验。在实际开发过程中，我们可以根据需要选择不同的 Reset 方案，并在自己的样式中进行修改和完善。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c32ec883d39b4881723560