在前端开发过程中，我们有时会需要重置网页中的默认样式以便更好的进行页面布局和设计。而 reset-css 这个 npm 包就是为此而生的。
reset-css 简介
reset-css 是一款 CSS 样式表工具，它通过消除默认样式，将网页元素的样式还原为一致的默认状态，从而实现网页布局的重置和规范化。
reset-css 的特点：
- 清除默认样式：重置了页面所有的默认样式，使各浏览器的默认样式保持一致。
- 保留有用样式：保留了一些有用的默认样式，如表格边框，列表缩进等，方便页面布局。
- 利于扩展：reset-css 的样式表结构简单清晰，便于扩展和覆盖自定义样式。
安装和使用 reset-css
从 npm 包管理器中安装 reset-css 可以很容易地使用：
npm install reset-css
在项目中使用 reset-css 可以通过 import 直接引入 main/reset.css 文件即可：
/* App.css 文件 */
@import "reset-css/main/reset.css";
/* 自定义 CSS 样式 */
body {
background-color: #f0f0f0;
}接下来我们来看看 reset-css 如何对常见元素的样式进行重置：
基本文本样式重置
reset-css 通过消除页面的默认字体、空白字符、字母大小写等属性将文本默认样式还原为了一致的状态：
-- -------------------- ---- -------
-- -------------- --
-- ------ --
-----
---
---
---
---
---
---
---
---
---
--
-----------
----
---
-------
-----
---------
-------
-------
------
---------
-------
---------
---------
-------
--------
--------
---- -
------------ -------------- ------------------- ----- --- ------- ---------- ------ -----------
----- ----- ------ ----- -- ------ ----- -- -------
-
-- -------- --
----
---- -
------------ --------- -- --------- ------ --- ---- ------ --
-
-- --------- --
-------
------
---------
-------
-------- -
--------------- -----
-表单元素样式重置
reset-css 去掉了表单元素的默认外观、边框等样式，并统一了各浏览器下的样式：
-- -------------------- ---- ------- -- -------------- -- -- ------ -- ------- ------ --------- ------- -------- - ------- -- -- -- ------- -- ---------- ----- -- - -- --------------- ------- -- - -- ---------------- --------- -- - -- --------- ------------- -- - -- ------ -- -- - -- - -- ------ -- ------- ----- - ------------ ------- - ------- ------ - --------------- ----- - -- ------ -- ------- ---- --------------------- -- - -- -------------------- -------------------- - ------------------- ------- -- - -- ------- -------- -- - -- - ----------------------- ------------------- - ------------------- ----------- ---------------- ----------- ----------- ----------- -------- -- - -------------------- - ------------------- ---------- -- - -- ---------------- ------------ ------------------- ------------ ----------- ------------ - ------------------------------------------------ --------------------------------------------------- ---------------------------------------------------- ------------------------------------------------------- - -------- ----- - -- ------------ -- -------- - --------- ----- --------------- ---- -
链接样式重置
reset-css 对链接样式进行了重新定义并统一，请看以下代码：
-- -------------------- ---- ------- -- -------------- -- - - ------ -------- ---------------- ----- - ------- - ---------------- ---------- -
图像元素样式重置
reset-css 统一了图像元素的样式：
/* main/reset.css */
img {
border: 0 none;
vertical-align: middle;
}列表样式重置
reset-css 去掉了列表元素的默认样式：
/* main/reset.css */
ol,
ul {
list-style: none;
}总结
reset-css 是一款非常优秀的 CSS 样式表工具，通过它我们可以很方便地将原来复杂、混乱的浏览器默认样式进行统一和重置，为后续的样式设计打下更加牢固的基础。当然，为了能够更好地进一步运用此工具，我们还需结合实际业务场景进行学习和掌握。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64205