在编写前端界面时，我们会使用 HTML 标记语言来定义页面结构，然后使用 CSS 来设置样式。而 HTML 标签本身也有一些默认的样式，这些默认样式可能会对我们的样式设置造成影响。为了避免这种影响，我们需要了解标签的默认样式，并根据需要进行重置。
标签的默认样式
每个 HTML 标签都有一些默认的样式，这些样式是浏览器在渲染页面时自动设置的。例如，<h1> 标签的默认样式是加粗、居中、有较大的字号。而 p 标签的默认样式是有一定的行间距、左对齐等等。
在大多数情况下，这些默认样式对我们的设计不会造成太大的影响，但有时候我们需要对标签的样式进行自定义设置。这时就需要清除默认样式。
CSS Reset
CSS Reset 是一种清除所有默认样式的方法。CSS Reset 会将所有元素的所有样式都设置为初始状态，然后我们可以在这个基础上进行自定义样式的设置。
以下是一份简单的 CSS Reset 代码：
-- -------------------- ---- ------- -- ----- --- ------ -- - - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -- ----- ---- ----- ------- ------ -- ----- ------- ------ --------- ------- -------- - ------- -- ---------- ----- ------------ -------- --------------- --------- -
这份代码首先将所有元素的 margin、padding、border 等样式设置为 0，将字体大小设置为 100%。它还重置了一些标签的默认样式，如 body、button、input、optgroup、select、textarea 等。
使用 CSS Reset 可以帮助我们避免默认样式对我们的样式设置造成的影响，从而更方便地进行自定义样式的设置。
示例代码
以下是一个示例代码，它展示了如何使用 CSS Reset 进行样式设置。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- ---------------
-------
-- ----- --- ------ --
- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- ----- ---- ----- ------- ------ --
-----
-------
------
---------
-------
-------- -
------- --
---------- -----
------------ --------
--------------- ---------
-
-- ------ ------ --
---- -
------------ ------ -----------
---------- -----
------------ ----
------ -----
-
-- -
---------- ----
------------ -----
----------- -------
-------------- ----
-
- -
-------------- ----
-
- -
------ --------
---------------- -----
-
------- -
---------------- ----------
-
--------
-------
------
------- ----- ------------
------- -- -- ------- -- ----- --- ----- -- --- ------ -----------
----- -------------- ---- ----- --- -------------
-------
-------在这个示例代码中，我们使用了 CSS Reset 来清除所有默认样式，然后设置了一些自定义样式，包括全局字体、一些标签的大小、间距等等。这个示例代码展示了如何使用 CSS Reset 来进行自定义样式的设置。
总结
本文介绍了标签的默认样式以及如何使用 CSS Reset 来清除默认样式。了解标签的默认样式可以帮助我们更好地进行样式设置，而使用 CSS Reset 可以帮助我们避免因默认样式造成的设计问题。希望本文对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654bc26a7d4982a6eb5816c2