什么是 CSS Reset？
CSS Reset 是一组 CSS 样式规则代码片段，用于规范化 Web 页面在不同浏览器和平台上的默认样式和行为。这些默认样式和行为可能会影响你的布局和设计，因此 CSS Reset 可以帮助你以预期的方式来构建你的网站。
为什么需要 CSS Reset？
每个浏览器都有自己的默认样式，这些样式可能会导致 Cross-Browser 兼容性问题，并且这些默认样式可能会干扰你的设计和布局。这是因为某些元素在不同浏览器中有不同的默认值，例如外边距、内边距、行高、字体大小等等。这些默认值可能会导致元素在不同浏览器中出现不一样的表现，这会给你的工作带来麻烦。
因此，为了避免这些问题，CSS Reset 可以通过移除或重置所有元素的默认样式来提供一个统一的基础样式，使得你的网站和应用程序在不同浏览器和平台上都可以以预期的方式进行渲染。
常用的 CSS Reset 库：
Normalize.css
Normalize.css 是一个非常流行的 CSS Reset 库，它基本上保留了浏览器的默认样式，同时修复了许多常见的 Cross-Browser 兼容性问题，并在不同浏览器之间保持了一致的基础样式。它还提供了一些扩展样式，如排版、表格样式、媒体查询等。
示例代码：
<link rel="stylesheet" href="normalize.css">
Reset.css
Reset.css 是一个比较传统的 CSS Reset 库，它删除了所有的浏览器默认样式，以及一些常见的表单样式和其他常见问题的修复。它提供了一个基本的、干净的、重置的样式表。
示例代码：
<link rel="stylesheet" href="reset.css">
如何使用 CSS Reset？
在引入 CSS Reset 库之后，你需要在你的样式表中添加一些特定的样式规则。
1. 在 CSS Reset 库之前引入你自己的样式表
<link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css">
2. 给所有元素添加样式
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- ---------- ----- ------------ -------- --------------- --------- -展开代码
3. 修复一些常见问题
3.1 清除浮动
.clearfix::after { content: ""; clear: both; display: table; }
3.2 禁止用户选择文本
body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
3.3 禁止文字缩放
html { -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; }
总结
使用 CSS Reset 库能够提供一个可预测的基础样式，减少浏览器间样式的差异性，简化样式的开发和维护，并提升用户体验。常用的 CSS Reset 库有 Normalize.css 和 Reset.css，你可以选择适合自己的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bfead29e06631ab9c6240d
