在开发网站的过程中，样式重置（CSS Reset）是必不可少的一步。因为各个浏览器对 HTML 元素默认样式的实现并不完全一致，使用重置样式可以保证页面展示的一致性和稳定性。然而，有时候在使用重置样式后会出现布局问题，这就需要我们进一步解决。
什么是 CSS Reset？
CSS Reset 是指通过重置默认样式表来达到网页在各个浏览器中显示效果一致的目的。这个概念最早由 Eric Meyer 开创，并编写出流行的 reset.css 文件。CSS Reset 通常包含以下步骤：
-- -------------------- ---- ------- - - ------- -- -------- -- ------- -- ---------- ----- ------------ ------- --------------- --------- ----------- ----------- -
这段代码将所有 HTML 元素的默认样式重置为相同，从而确保网页能够在各种浏览器上都显示一致的效果。但是，这个样式表只能解决一些最基础的问题，对于更细节和具体的样式问题并不能完全解决。
解决布局问题的方法
方法一：使用 Normalize.css
Normalize.css 是一款非常流行的 CSS Reset 库，它在 reset.css 的基础上添加了一些针对浏览器兼容性的样式。这个库可以帮助我们解决很多布局问题，比如表单元素的样式问题、列表字体问题等等。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
使用方法也非常简单，只需要在 HTML 文件中添加上面这行代码即可。
方法二：手动调整样式
手动调整样式需要一定的前端技术基础，但是它可以完全解决所有的布局问题。我们可以通过浏览器的开发者工具对每个元素的样式进行逐一调整，直到达到想要的效果。同时，我们还可以使用一些 CSS 属性，比如 flex、grid 等来更加方便地完成布局。
下面是一个使用手动调整样式的例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- ----------
-------
-- -- ------ --
- -
------- --
-------- --
------- --
---------- -----
------------ -------
--------------- ---------
----------- -----------
-
-- -- ------ --
---- -
------------ ------ -----------
----------------- --------
-
-- -- ---- --
---------- -
------ ----
------- -----
-
------- -
------- ------
----------------- -----
------ ------
-------- -----
---------------- --------------
------------ -------
-------- - -----
----------- -----------
-
-- -
---------- -----
-
---- -
-------- -----
----------- -----
------- --
-------- --
-
---- -- -
------------- -----
-
-------- -
-------- -----
---------------------- --------- -----
--------- -----
-------- -----
----------- -----------
-
----- -
----------------- ------
-------------- ----
----------- - - ---- ------- -- -- -----
-------- -----
----------- -----------
-
----- -- -
---------- -----
-------------- -----
-
----- - -
---------- -----
-
--------
-------
------
---- ---------------
-------------
--- ------------
-----------
-----------
-------------
-----
------
---- ------------------
---- ----------------
---- -------------
--------------
------------
------
---- -------------
--------------
------------
------
---- -------------
--------------
------------
------
---- -------------
--------------
------------
------
---- -------------
--------------
------------
------
---- -------------
--------------
------------
------
------
------
-------
-------这个例子包含了三个步骤：
- 重置默认样式；
- 设置常用样式；
- 调整布局。
通过手动调整样式，我们可以得到与设计一致的页面布局，同时避免了 CSS Reset 带来的布局问题。
总结
CSS Reset 是前端开发中必不可少的一步，它可以确保网页在各种浏览器上显示一致的效果。但是，CSS Reset 仅能解决一些最基础的问题，对于更细节和具体的样式问题并不能完全解决。因此，我们可以使用 Normalize.css 或手动调整样式来解决布局问题。手动调整样式需要一定的前端技术基础，但是它可以完全解决所有的布局问题，并且更加灵活。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bf5b148841e9894a3ecfd