在前端开发中，CSS Reset 是一个常用的技术，它可以解决一些常见的样式问题，比如不同浏览器之间的样式差异、默认样式的影响等等。本文将介绍多种常见的 CSS Reset 技术，包括重置样式表、标准化样式表、自定义样式表等，帮助大家更好地解决前端开发中的样式问题。
1. 重置样式表
重置样式表的目的是将所有 HTML 元素的默认样式都清除掉，然后再重新定义样式。这种方法适用于需要完全自定义样式的项目，但是需要注意的是，这种方法可能会导致一些元素的样式丢失，比如表单元素的默认样式。
下面是一个简单的重置样式表的示例：
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}这段代码将所有 HTML 元素的 margin、padding、border、font-size、font-family、vertical-align 这些样式都设置为了默认值。在实际使用中，我们还可以根据需要添加其他的样式。
2. 标准化样式表
标准化样式表的目的是在保留 HTML 元素的默认样式的基础上，消除不同浏览器之间的样式差异，使得网页在不同浏览器中显示效果一致。这种方法适用于需要保留默认样式的项目。
下面是一个简单的标准化样式表的示例：
-- -------------------- ---- ------- ---- - ----------- ----------- ---------- ------ - -- ---------- -------- - ----------- -------- - ---- - ------- -- ---------- ------- ------------ ---- ------------ -------------- ------------------- ------ ---- ------- ------------ ------- ---------- ---------- ------ ----------- ------ ----- ----------------- ----- -
这段代码将所有 HTML 元素的 box-sizing 设置为了 border-box，使得元素的宽度和高度包含了 padding 和 border 的宽度。同时，设置了默认的 font-size 为 62.5%，使得 1rem 等于 10px，方便使用 rem 单位。另外，设置了默认的字体、颜色、背景色等样式，使得页面在不同浏览器中的显示效果一致。
3. 自定义样式表
自定义样式表的目的是根据项目的需要，自定义一套适合自己的样式表。这种方法适用于需要定制化样式的项目。
下面是一个简单的自定义样式表的示例：
-- -------------------- ---- ------- -- ----- -- ----- ----- ---- ----- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- ---------- ----- ------------ -------- --------------- --------- - -- ------ -- ---- - ------------ ---------- ------ ---------- ------ ----------- ---------- ----- ------------ ---- ------ ----- ----------------- ----- - --- --- --- --- --- -- - ------------ ----- ------------ ---- -------------- ----- - - - ------ -------- ---------------- ----- - ------- - ---------------- ---------- - ------ - ------- ----- ----------------- -------- ------ ----- -------- ------ ----- -------------- -------- ------- -------- - ------------ - ----------------- -------- - ------------------- -------------------- ---------------------- - ------- --- ----- ----- -------------- -------- -------- ------- ---------- ----- ------------ ---- ------ ----- ----------- ----------- - ------------------------- -------------------------- ---------------------------- - ------------- -------- -------- ----- -
这段代码先重置了所有 HTML 元素的默认样式，然后根据需要自定义了一些样式，比如 body 的字体、颜色、背景色等，h1~h6 的样式，a 标签的样式，按钮的样式，输入框的样式等。这种方法需要根据项目的需要进行定制，可以灵活地设置样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d38b85a941bf71346c03cd
