背景
在前端开发中，我们经常会遇到不同平台的浏览器对同一个样式的呈现具有差异的情况。这个问题可能会导致页面的排版错乱，影响到用户的使用体验。为了解决这一问题，我们通常使用 CSS Reset 进行页面样式的初始化。
CSS Reset 是指在编写样式表前，将所有的浏览器默认样式重置为同一标准的样式进行统一呈现。它可以清除浏览器默认的样式，从而帮助我们更方便地使用自定义的样式。
然而，CSS Reset 的正确使用方法和细节需要我们注意，本文将会介绍如何使用 CSS Reset，并探讨 CSS Reset 中的一些细节和注意事项。
为什么要使用 CSS Reset
浏览器默认样式是不可避免的，不同浏览器对同一标签的样式定义也不同。这就导致了样式在不同浏览器中呈现效果不一致，甚至布局错乱。而 CSS Reset 便是为了解决这一问题而诞生的。
最初的 CSS Reset 是由 Eric Meyer 发明的，其主要目的是消除浏览器间的差异，使网页在不同浏览器上呈现出相同的样式。目前，CSS Reset 已经成为前端开发必不可少的一部分，在几乎所有的项目中都可以看到它的身影。
各种 CSS Reset 的优缺点
在 CSS Reset 的使用上，由于不同的 CSS Reset 库会采用不同的方案来重置默认样式，所以我们需要根据实际情况选择适合项目的 CSS Reset 库。目前比较流行的 CSS Reset 库主要有三种：
Eric Meyer Reset
简介：
Eric Meyer Reset 是最早的 CSS Reset 其创始人是 CSS 大师 Eric Meyer，它非常精简，只针对一些浏览器对一些 HTML 元素的默认样式设置，而对于这些元素的语义及内容结构不做任何调整。因此，如果开发时不太注意可能会影响到部分元素的语义。
优点：
- 得到广泛的应用和认可
- 良好的兼容性
- 提供了一个绝对性(X,Y,Z坐标为0)的基准线
缺点：
- 针对一些元素的默认样式设置，不够全面
- 未完全重置元素的语义和结构
示例代码：
-- -------------------- ---- ------- -- ---- ----- ----- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- ---------- ----- ------------ ------- --------------- --------- - -- ----- --------- ----------- -- ----- -- --- ------ -- -------- -- --- -- - ----------- ----- - -- ------- ----- ------- --- ------- --- --- ----- ------- -- --- -- -- ------- ----- ------- --- ------- --- ------- -- ------- -- -- ----------- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - -- ----- ----- ------- --- -------------- ------ -- ----- -- ----- - ---------------- --------- --------------- -- -
Normalize.css
简介：
Normalize.css 是与 Eric Meyer Reset 类似的另一种 CSS Reset。它在 Eric Meyer Reset 的基础上增加了许多修复样式，更为全面的针对不同浏览器最基本的对HTML元素样式进行定制。相对于 Eric Meyer Reset，Normalize.css更注重框架并起到了框架的作用，而且它的样式规则选择器更加严谨。
优点：
- 解决了 Eric Meyer Reset 的不足
- 对一些 HTML 元素的样式进行修复，得到更一致的样式效果
- 良好的兼容性
缺点：
- 文件体积较大，需要下载
示例代码：
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - --- --- ------- ------- -- -- --- - -- --- --- ------- ------- -- ----- --- --- -------- -- -- - ------- -- -- - -- ------ -------- ----------------- ---- ------- -- -- --------- -------- -- - --- - --- --- ------- ------- -- --- -- -------- - --------------- --------- - --- - ------ --- ------- -------- --------- -- -- ---- -- -------- - -------- ----- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ------- ------- -- -------- -- ------- ------ -------- - ------- -- -- --- ---- ----- --- ------- ----- -- -------- -- -- --- ---- ----- --- ------- ----- -- -- ------- ----- --- --- ------ -- -- --------- ----- --- --- ------ -- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---------- -- ------- ----- --- ------- -- ------ - ---------- ----- -- - -- -- ----------- ----- --- --- ------ -- - --- - ------ --- ------ -- ------- -- ---------------------------------- --------------------------------- ---------------------------------- ------------------------- ------------------------ -------------------------- - -------- -- ------------- ----- - --- - ------- --- ----- ------ ----- -- --- -------- ----- -- ---------------------- --------------------- ---------------------- ------------- ------------ -------------- - -------- ----- -- -------- --- ------- --- ---- -- --- ------- --- ----- ------------ -- --------- -- - --- - -- ------ --- ------ -- ------- --- ------- - -- ------ --- ------- -- -------- -- ---------------------------- - -- -------- -- --- --------- -- ------ -- -- ------- ----- --- --------- -- ------ -- -- ----------------- ----- --- --------- -- ------ -- - -- ------ -------------------------------------------------------------------------- -- --- - ------ --- ------- ------- ----- ----- -- --- --------- -- ----- - ---------------- --------- --------------- -- -
原始 CSS Reset
简介：
相较于 Eric Meyer Reset 和 Normalize.css，原始 CSS Reset 更为显式。它会删除所有的默认样式，并对所有 HTML 元素进行定制。在使用这种 CSS Reset 的情况下，我们需要重新自己定制样式。
优点：
- 删除了所有默认样式，保证了更高的样式一致性
- 可以自由定制每个 HTML 元素的样式
缺点：
- 缺乏统一的样式规范
- 配置比较繁琐，需要重新自己定制样式
示例代码：
-- -------------------- ---- ------- -- --------------------- -- ----- ----- ---- ----- ------- ------- --- --- --- --- --- --- -- ----------- ---- ----- -------- ----- ----- ---- ---- --- ---- ---- ---- -- ----- ------ ------- ---- ---- ---- -- -- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- ------------ -------- ----------- -------- ---------- ----- ------------ -------- --------------- --------- - -- ------------------- -- ----- - ---------------- --------- --------------- -- - -- ----------- -- --- - ------- -- --------------- ------- - -- --------- -- --- --- --- --- --- -- - ---------- ----- ------------ ------- - -- ---- -- ------ - --------- ----- ----- -- -
CSS Reset 的正确使用方法
CSS Reset 库的引入
在项目中使用 CSS Reset 库之前，我们需要先将库引入到项目中。我们可以通过 CDN 引入许多 CSS Reset 库，也可以将库下载到本地，然后引入。
<!-- CDN 引入 Normalize.css--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" /> <!-- CDN 引入 Minireset.css --> <link rel="stylesheet" href="https://unpkg.com/minireset.css/minireset.css" /> <!-- 本地引入 Eric Meyer Reset --> <link rel="stylesheet" href="./css/reset.css" />
样式的覆盖
虽然 CSS Reset 可以帮我们删除默认样式，但是在某些情况下，我们还需要对某些元素重新定义样式，以满足布局和设计的要求。在 CSS Reset 库生效的前提下，我们可以通过为元素添加样式来覆盖默认样式。
-- -------------------- ---- ------- ---- - ----------------- -------- - -- - ---------- ----- ------------ ----- - - - ---------------- ----- ------ -------- -
尽量避免浏览器的怪癖
在使用 CSS Reset 的过程中，我们不仅要考虑如何适配不同的浏览器，还要考虑浏览器本身的怪癖。有时候，浏览器的 Bug 或 Bug 修复可能导致无法生成所需的效果，解决这个问题就需要进行错误检测和修复。
CSS Reset 的细节和注意事项
更具体的选择器能提高速度
选择器的具体性（Specificity）是指选择器与元素匹配时的权重大小，权重越大的选择器匹配的优先级也越高。选择器具体性定义的是选择器各部分权重的总和，因此，可以在选择器上添加更具体的选择器来提高匹配精度，避免二次匹配，提高速度。
-- -------------------- ---- ------- -- -- ----------- -- -- - ------- -- ---------- ----- - -- -- -- --------- ----------- -- ------- -- - ------- -- ---------- ----- - -- ---- ----- --------- --------- -- ------------- -- - ------- -- ---------- ----- -
不清除float的元素会自动包裹
当一个元素（如 div）嵌套在另一个元素中时，如果内部元素采用了浮动定位，外部元素没有使用清除浮动，就会出现漏斗状的效果，导致排版错误，影响美观和用户体验。
-- -------------------- ---- ------- -------- - ------ ------ ------- - ----- - ------- - ------- ----- ----------- -------- - ----- - ------- ------ ----------- -------- ------ ----- - -------- - ------- ------ ----------- -------- - ---- ---------------- ---- --------------------- ---- ------------------- ---- ---------------------- ------
文字排列时要使用垂直对齐
在文字排列时，如果使用默认的对齐方式，文字可能会出现偏移或者有些字母会超出边界，导致页面样式难以控制。因此，在使用文本时，我们需要使用垂直对齐属性来控制文字的排列位置，保证排版效果的美观和稳定。
-- -------------------- ---- ------- ------- - ------- ----- ----------- -------- ----------- ------- ------------ ----- - ------- -- - ------- -- ---------- ----- ------------ ----- --------------- ------- -
总结
本文详细介绍了 CSS Reset 的使用方法和注意事项，包含了三种流行的 CSS Reset 库的优缺点和示例代码，并探讨了在使用 CSS Reset 时需要注意的细节和技巧。在实际项目中，选择合适的 CSS Reset 库，合理地使用样式覆盖和其他技巧，既可以提高页面的稳定性和美观度，又可以提高前端开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461e3ee968c7c53b0339719