现代 CSS reset（生成器）

现代 CSS reset（生成器）: 用途

每个项目开头都要修复同样的问题：默认外边距、box-sizing、撑破布局的图片、字体不同的表单控件，以及在手机上撑破屏幕的长单词。

勾选您需要的规则，复制一份简短且带注释的 reset，包括 box-sizing border-box、以 dvh 表示的最小高度、响应式媒体、表单中的 font: inherit、overflow-wrap、标题和段落的 text-wrap balance 与 pretty、仅对未要求减少动态的人启用平滑滚动，以及对要求减少动态的人关闭动画。

使用方法

1. 勾选要使用的规则。
2. 阅读每条规则的注释。
3. 复制或下载 reset.css，放到 CSS 开头。

使用场景

• 从零开始一个网站。
• 统一团队的项目。
• 了解每条 reset 规则的作用。

常见问题

什么是 CSS reset？

这是放在 CSS 开头的一小组规则，用来消除浏览器之间的差异和烦人的默认样式，例如 body 的外边距、撑破布局的图片，以及字体不同的表单控件。它让后面的 CSS 更好写。

reset 还是 normalize？

normalize.css 保留默认样式，只修复浏览器之间的差异；现代 reset 更进一步，移除几乎总要被覆盖的样式。如今的浏览器已相当一致，所以像这样的简短 reset 成了最常用的方案。

为什么平滑滚动放在 media query 里？

动画滚动可能让对动态敏感的人感到不适。放在 prefers-reduced-motion: no-preference 里，只有没有在系统中要求减少动态的人才会启用。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具