前言
在编写前端页面时，我们通常需要处理各种浏览器之间的差异。这些差异可能出现在标签之间的间距、字体大小、行高、文本对齐等方面。为了解决这些问题，我们通常会使用 CSS Reset。CSS Reset 是一种方法，用于还原浏览器默认的样式，以确保我们在不同浏览器上显示的样式一致。但是，只是使用 Reset 并不能保障一定能写出更好的代码。本文将介绍 5 个技巧，帮助你更好地利用 CSS Reset 写出更好的代码。
技巧一：优先选择 Normalize.css
在使用 CSS Reset 时，我们通常会选择 Reset.css 或 Normalize.css。Reset.css 会完全清除浏览器的默认样式，并用自己的样式代替。这种方法在大部分情况下是可以工作的，但是也容易出现问题。例如，如果我们在一个链接上设置了文本颜色和背景颜色，链接的下划线就会失效。而 Normalize.css 会保留一些有用的默认样式，同时修复了一些常见的浏览器之间的差异。因此，在实际项目中，优先选择 Normalize.css 是更好的选择。
示例代码：
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- ---------------- --------- --------------------- ----- ---------------- ---------------------------------------------------------------------- ------- ------ ---------- ----------- ------- -------
技巧二：使用 box-sizing 属性
box-sizing 属性用于控制一个元素的盒模型。默认情况下，元素的盒子模型由它的内容、内边距和边框组成，盒子的大小通过设置元素的 width 和 height 属性实现。而 box-sizing 属性可以控制元素的盒子模型是根据 content-box 还是 border-box 进行计算。当 box-sizing 属性设置为 border-box 时，元素的内容和内边距都被计算到盒子的内部。这相当于为元素提供了一个内置的 padding，并避免了因为边框和 padding 导致元素大小的误差。
示例代码：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
--------- ------------------
-------
- -
----------- -----------
-
---- -
------ ------
------- ------
-------- -----
------- --- ----- -----
-
--------
-------
------
---- ------------------ ------------
-------
-------技巧三：使用 rem 和 em 代替像素单位
像素（px）是绝对长度单位，意味着它们在不同的设备上具有相同的尺寸。然而，rem 和 em 是相对长度单位，它们根据其父元素的字体大小进行计算。虽然像素单位可以满足大多数需求，但是在需要适配多种设备的情况下，使用相对单位会更加方便。另外，使用相对单位可以使得我们可以避免一些不必要的 calc() 函数的使用，提高代码的可读性。
示例代码：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
--------- --- - ----------
-------
---- -
---------- -----
-
---- -
---------- -------
-------- ------
-
--------
-------
------
---- ------------------ ------------
-------
-------技巧四：使用链接的伪类
在编写链接样式时，我们通常会使用链接的伪类，以显示链接的状态。例如，当用户鼠标悬停在链接上时，我们可以使用 :hover 伪类显示链接的样式；当链接处于访问过状态时，我们可以使用 :visited 伪类显示链接的样式。这些伪类可以增加链接的可用性，并使网站更加易于使用。
示例代码：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
----------------------
-------
------ -
------ -----
---------------- -----
-
------- -
---------------- ----------
-
--------- -
------ -------
-
--------
-------
------
-- --------------- ----------
-------
-------技巧五：使用媒体查询
在编写响应式网页时，我们通常希望能够根据设备的屏幕大小来改变网页的布局。媒体查询允许我们根据不同的屏幕大小设置不同的 CSS 样式。例如，当屏幕宽度小于 768 像素时，我们可以修改导航栏的样式，以保证网站在移动设备上具有更好的可用性。
示例代码：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
----------------------------
-------
---- -
-------- -----
-
------ ------ --- ----------- ------ -
---- -
--------------- -------
-
-
--------
-------
------
---- ------------
-- -----------------
-- ------------------
-- --------------------
------
-------
-------结论
使用 CSS Reset 可以帮助我们解决浏览器之间的差异，但是要写出更好的代码，我们还需要掌握一些技巧，如使用 Normalize.css、box-sizing 属性、相对单位、链接的伪类以及媒体查询。这些技巧可以提高代码的可读性和可维护性，并为网站提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c38ce208e8e1a085c385f