在前端开发中，CSS 是构建页面样式的核心技术之一，但在不同的浏览器下，同一份样式代码在不同的页面上可能呈现出不同的效果，这使得网页开发人员需要编写更多的样式代码来调整样式。为了解决这个问题，CSS Reset 技术应运而生。
什么是 CSS Reset？
CSS Reset 是一种标准化样式的技术，旨在解决不同浏览器在默认的样式上的差异问题，通过重置浏览器默认样式表中的 HTML 元素样式，使得所有浏览器对这些元素的样式都处于同一个基础状态，以便于在其上添加自定义样式。
CSS Reset 常用技巧和要点
- 使用 Reset 样式前，需要先通过 Normalize.css 引入一些常用的样式，特别是一些细节处理，这些样式可以实现样式层面的标准化，减少在后续样式定义中的重复定义。
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* ... */
- 将 HTML 元素的 margin 和 padding 全部设为 0，可以更好的控制其位置和尺寸：
html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,p,blockquote,fieldset,legend {
margin:0;
padding:0;
}- 对于表单组件等特殊元素，需要清除其默认美化样式，以便于自定义样式：
-- -------------------- ---- -------
----------------------------------- -
---------
----------
---------
----------------
--------------
--------------------
------------------
--------------------
-- 清除图片的默认样式：
img {
border:0;
max-width:100%;
}- 对于常见的排版元素，设置更为符合需求的默认样式：
-- -------------------- ---- -------
----------------- -
---------------
-------------------
-
----- -
----------------
-
- -
---------------------
-- 定义全局字体颜色和大小：
body {
font-size:14px;
color:#333;
}案例示范
以下是一个针对 PC 页面的 CSS Reset 案例，基于 Normalize.css 常用样式和 CSS Reset 常用技巧：
-- -------------------- ---- -------
--- ------------- ------ - --- ------- - -------------------------------- --
-- --- --
----------------------------------------------------------------- -
---------
----------
-
----------------------------------- -
---------
----------
---------
----------------
--------------
--------------------
------------------
--------------------
-
--- -
---------
---------------
-
----------------- -
---------------
-------------------
-
----- -
----------------
-
- -
---------------------
-
---- -
---------------
-----------
------------ ---------- -----------------------------------------
----------------------- ------------
------------------------ ----------
-总结
通过应用 CSS Reset 技术，我们可以在样式表中统一样式，减少不同浏览器的默认样式带来的不必要的样式调整，使开发更具规范性和效率性。同时，学习掌握 CSS Reset 技术也是每个前端开发者必不可少的技能之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c107a48841e9894a5d5c8