前言
网页的的显示效果离不开 CSS （层叠样式表）的运用，但随着 CSS 的繁荣发展，浏览器的标准实现却越来越不一致，导致网页呈现出来的效果也跟着变得乱七八糟。这时候，我们需要找到一种技术来优化 Web 程序，使元素在各个浏览器下显示一致。这种技术就是“CSS Reset”。
什么是 CSS Reset
CSS Reset 是一种通过预设浏览器的默认样式来统一各个浏览器的样式表达，从而获得更稳定、一致的效果。当我们使用 CSS Reset 技术后，我们需要使用自己编写的 CSS 样式命令来定义网页的样式。
CSS Reset 可以优化什么
CSS Reset 主要是用来解决浏览器默认样式的问题。一般来说，不同浏览器默认样式的不同点主要集中在以下几个方面：
- 内容元素
- 表单元素
- 常规排版元素
通过使用 CSS Reset 技术，我们可以针对这些元素制定自己的样式，使其在不同浏览器下展示效果一致，同时消除多个浏览器的默认样式对页面样式的干扰。
如何编写 CSS Reset
编写 CSS Reset 通常需要以下原则：
1. 选择器
在编写 CSS Reset 技术时，要使用通配符选择器（*）覆盖掉所有元素的默认样式。同时，为了针对不同的元素类型，在选择器前面添加特定的类名或 ID 名称。
-- -------------------- ---- ------- -- ------ -- - - ------- -- -------- -- ----------- ----------- - -- -------- -- ---- - ------------ ------ ---------- ----------- - ------ - ---------------- ----- - ------------------ - -------------- ---- -展开代码
2. 样式继承
有些样式可以通过继承方式传递给父元素，因此我们可以将这些属性设置在父元素的样式中。
-- -------------------- ---- ------- ---- - ------------ ------ ---------- ----------- ---------- ----- ------------ ---- ------ ----- - --- --- --- --- --- -- - ------------ -------- - - - ------ -------- ---------- ----- -展开代码
3. 移除不必要的样式
很多浏览器在默认样式中添加了一些不必要和冗余的样式，我们要将它们移除，从而更好地优化页面。
-- -------------------- ---- ------- ------- ------ --------- ------- -------- - ------- -- -------- -- ------- ----- ----------------- ------------ ---------- ----- ------ -------- -展开代码
CSS Reset 常用样式
下面列举一些常用的 CSS Reset 样式，供大家参考。
重置盒模型
* { margin: 0; padding: 0; box-sizing: border-box; }
移除默认的边距、内边距和列表样式
ul, ol { margin: 0; padding: 0; list-style: none; }
移除默认的下划线样式
a { text-decoration: none; color: inherit; }
移除 input 的默认样式
-- -------------------- ---- ------- ------- ------ ------- -------- - ------- -- -------- -- ---------- ----- ------ -------- -------------- -- ------------------- ----- ---------------- ----- ----------- ----- -展开代码
清除背景图像
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ----------- ----- ------- -- ------- -- -------- -- --------------- --------- -展开代码
结语
使用 CSS Reset 技术可以使我们的网页更加一致和统一，进一步提高网页浏览的信任度以及稳定性，减少因浏览器样式差异而带来的烦恼，提升用户体验。同时，通过示例代码的介绍，我们也可以更好地理解并掌握 CSS Reset 技术的实现方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bee7880c976d473a33ef83
