CSS Reset 是什么？
在前端开发中，不同的浏览器对 HTML 和 CSS 的渲染方式存在差异，为了达到跨浏览器的一致性，开发者们开始尝试使用 CSS Reset 来重置浏览器的默认样式表。
CSS Reset 是一种预先定义好的 CSS 样式集合，目的是将浏览器自带的默认样式全部清除，从而达到跨浏览器的一致性。
CSS Reset 的作用
HTML 和 CSS 的渲染方式在不同的浏览器中有很大的差异，比如文本的大小、样式、居中排列等。通过使用 CSS Reset，可以统一不同浏览器之间的样式表，让网页在各个浏览器上显示效果基本一致，提高开发的效率。
另一个作用是帮助开发者更加方便地重写样式，因为浏览器默认样式经常会干扰我们的布局或设计。使用 CSS Reset 可以让我们避免这些冲突。
如何使用 CSS Reset
下载 CSS Reset 库，比如 normalize.css 或 reset.css。normalize.css 与 reset.css 的差异在于 normalize.css 保留了一些有用的默认值。
在 HTML 文件中引入 CSS Reset 的文件。
<head> <link rel="stylesheet" href="reset.css"> </head>
- 将网页中所有的元素样式都设置为初始状态，然后进行样式重写。以下是一个示例代码：
-- -------------------- ---- ------- -- --------- -- ----- ----- ---- ----- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - -- --- -- --------- -- -- ------ --- -- --- ---- -- ---- - ----------------- ----- ------ ----- ---------- ----- - -- - ---------- ----- ----------- ------- - -- --- -- ------ --
上述代码中，reset.css 中的样式将网页所有元素的样式设置为初始状态，比如去除了所有元素的 margin 和 padding，而 body 中的样式是我们的主题样式。
总结
CSS Reset 是前端开发中的一个基础概念，通过使用它可以消除浏览器差异，达到跨浏览器样式一致的目的。在使用 CSS Reset 时，需要注意保留需要的默认值，以免去除它们后反而导致布局或样式失效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eadc16f6b2d6eab359bad3