介绍
在网页设计中，尤其是前端开发中，我们经常会遇到字母转换的问题。比如说，我们在编写 HTML 代码时使用了一个 h2 标签，但是在添加 CSS 样式后，发现字号设定的不对，变成了 h3 的大小。这是因为浏览器已经给每个元素内置了默认的样式，这些样式会影响到我们自己所写的样式。
CSS Reset 是一个解决此类问题的好办法。使用 CSS Reset，可以消除浏览器内置的样式影响，从而轻松掌控你的网页设计。
本篇文章将介绍如何使用 CSS Reset 消除字母转换的影响，在此之前，我们先看一下原因。
原因
浏览器内置了一些默认的样式，包括字体和字号等。这些样式对于我们自己编写的样式会造成影响，甚至会破坏我们的设计意图。
比如说，浏览器内置的样式规定 h1 标签的字体大小为 2em，而字体的大小又是相对于整个网页文本字体大小计算的。那么当我们设置了整个网页文本的字体大小为 16px 时，h1 标签的字体大小就会被计算为 32px。
这导致的结果就是，当我们用 h2 标签，希望它的字号比 h1 小些时，实际上由于 h1 已经跨越了整个字号范围，所以 h2 所设置的字号大小实际上就变成了 h3 的大小。
为了解决这个问题，我们需要消除浏览器内置的样式，确保我们的样式不会在计算上受到影响。
CSS Reset
CSS Reset 是一个通过清空浏览器默认样式，并重新定义相应的属性和样式的 CSS 文件。
通过使用 CSS Reset，可以将所有 HTML 元素的默认样式全部清空，并用我们自己定义的样式重新定义它们，这样就可以避免浏览器默认样式对我们样式的影响。但是需要注意的是，使用 CSS Reset 可能会影响到一个页面的布局，所以在使用的时候需要谨慎考虑样式的选择和修改。
通常，CSS Reset 的代码会放在所有其他 CSS 代码之前。这是因为样式表按顺序加载，最后的规则会覆盖前面的规则。
下面是最基础的 CSS Reset，包含了所有 HTML 元素的清空代码：
-- --- ----- --
-- ------ --
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- ---
-------- ------ ------- -------- ------
------- ----------- ------- ------- -------
----- ---- ------- ----- -------- --------
----- ----- ------ ----- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- ------------ --
---- -
------------ --
------ ------
----------------- ------
-
-- -------- --
- -
---------------- -----
------ -----
----------------- ------------
-
-- ---------- --
--- -- -
----------- -----
------- --
-------- --
-
-- ---------------- --
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
----- -
---------------- ---------
--------------- --
-优化
尽管上述代码能基本实现消除字母转换的问题，但它并不完美。实际上，这份代码还是存在一些问题：
- 所有元素的外边距和内边距都被清空了。这样可能会影响到页面的布局；
- 该代码并未解决所有的字母转换问题。
针对第一个问题，我们可以在重置样式前先定义一些全局样式，来保证页面在重置后依然可以正常布局。比如说，我们可以给文档的最外层容器定义一个默认的 20px 的外边距和边框盒（border-box）盒模型，这样就可以保证重置后的页面布局不会受到太大的影响了。
针对第二个问题，我们可以选择更加全面和细致地清除浏览器的默认样式。但请注意，要确保对每个 HTML 元素的重置不会影响到页面的布局和效果。
下面是一个更为完整的 CSS Reset，它包含了上述的优化方案。你可以根据自己的喜好和需要来选择使用它，或者根据自身需求改进它。
-- ------ --
---- -
----------- -----------
---------- ------ -- --------------------- --
-
-- --------- ------- -
----------- --------
-
-- ---- --
---- -
---------- -------
------------ ----
-
-- ------- --
--- --- --- --- --- ---
-- ----------- ----
--- --- --- ---
----- --------- -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
-
-- ---- --
--- --- --- --- --- -- -
---------- -----
------------ -------
-
-- ---- --
----- -
---------------- ---------
--------------- --
-
-- ---- --
- -
---------------- -----
------ --------
-
--------- -
------ --------
-
-- ------ --
------- ------ ------- -------- -
------- --
-
-- ---- --
---- -------- -
------- -----
-结论
通过使用 CSS Reset，我们可以消除浏览器内置的样式，从而轻松完善自己的网页设计和布局。但要记得，CSS Reset 可能会影响到一个页面的布局，一定要谨慎选择样式并进行修改，以保证页面正常运行和正确的呈现。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6719bd74527444f66f1945f5