什么是 CSS Reset
前端开发中，每个浏览器都有自己的默认样式表，会影响到我们的设计与布局，使得页面的兼容性与一致性受到影响。为了解决这个问题，我们通常会使用 CSS Reset 来去除浏览器默认的样式表，让页面在每个浏览器上都有一致的表现。
CSS Reset 是一种通用的 CSS 模板，用于重置浏览器默认 CSS 样式，在一定程度上解决跨浏览器的兼容性问题。
为什么需要 CSS Reset
CSS Reset 的主要目的是解决浏览器默认样式的问题，使得页面布局更加规范化，提高页面兼容性与可读性。
浏览器默认样式是不同的，这会导致同一份代码在不同的浏览器上的呈现效果不同。有些样式可能在 Firefox下正常，但在 Chrome下无法正常呈现。通过使用 CSS Reset，我们可以通过固定一组常见样式值来统一页面的外观，提高页面可读性和一致性。
CSS Reset 的常见问题
1.过度清除
清除太多的样式定义，可能会扰乱页面元素原有的默认样式，导致设计师需要花费更多时间给单个元素配置样式。我们需要避免清除过多的样式，保留有用的样式定义。
2.浏览器兼容性问题
CSS Reset 也有涉及到浏览器兼容性问题。在使用某些重置样式时，我们可能会遇到浏览器不支持或者不同版本的浏览器默认样式表不同的情况。这时候我们需要根据实际情况进行优化。
完整的 CSS Reset 模板
下面是一份比较全面的 CSS Reset 模板，涵盖了常见的元素和常用的样式属性。
-- -------------------- ---- ------- -- ------ -- ----- -- --- --- --- --- --- --- --- --- --- ---- ----------- ------ ----- --------- ------ ------ - ------- -- -------- -- ---------- ----- ------------ ------- --------------- --------- ------- - ----- -------- - ----- ------------ -- - -- --------- -- - - ------ -------- ---------------- ----- - ------- - ------ -------- ---------------- ----- - -- ------ -- --- -- - ----------- ----- - -- ---------- -- ------- ------ ------- -------- - ------- -- - -- ------ -- ------ ------ - ------- ----- ------------------- ----- ---------------- ----- ----------- ----- - ------------------ ------------------------ - ------- - ----- - -- -------- -- ---------------- - ----------------- -------- ------------ ----- - ----------- - ----------------- -------- ------------ ----- - -- --------- -- --- - ------- - ----- - -- ------ -- ----- - ---------------- --------- --------------- -- - -- -- -- -------- -- ---- - --------------------- -------- ----------------------- ----- -------------------------- -------- ------------------------ ----- --------------------------- -------- ---------------------- ----- ---------------------- ----- -展开代码
模板说明
清除文本样式
这个部分是清除所有文本标签的默认样式。默认样式定义了默认字体大小、重量和颜色，如果不清除，会导致一些不必要的属性叠加和干扰，同时还会增加许多需要另外处理的人工样式，增加代码复杂度和替换成本。
清除超链接默认样式
定义了超链接的颜色，hover 颜色和下划线。
清除列表样式
列表在通过 CSS 设计时经常会用到，而其默认的样式不是很好看或者不符合要求，通过清除默认样式，可以让其自适应高度，避免自定高度造成问题。
清除表单控件默认样式
表单中的控件默认样式由浏览器决定，不同的浏览器显示效果不同。清除表单的默认样式有助于您构建统一的表单样式。
清除表单边框
默认情况下，表单控件具有蓝色的边框和阴影效果，这会影响页面布局的美观度。通过清除表单的默认样式，您可以壮大表单控件之间的距离和布局，减少一些冗余元素。
其他清除样式
这部分内容包括清除图片默认样式、清除表格边框以及清除 IE 自带的滚动条样式等。
总结
CSS Reset 是保证跨浏览器行为一致性的方法，使用一份完整的 CSS Reset 模板能够大大减少在设计时需要定义的 CSS 属性，提高开发效率，同时也能让网站更加美观、易于维护。如果需要进一步细化样式，可以根据实际需要灵活调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6657fd64d3423812e4db31d3
