CSS 框架 词条目录
前端Wiki/词条/CSS Reset

CSS Reset

定义把浏览器所有默认样式(边距、列表符号、标题大小)统一清零,为自定义样式提供干净的画布

Reset 是最早期的统一思路:既然各浏览器默认样式各不相同,就把 body 外边距、ul 圆点、h1 到 h6 的字号粗细、链接下划线、表格边框间距等全部归零,所有浏览器渲染起点完全一致。它让像素级还原设计稿更容易,因为页面上每一个间距和外观都是你显式写出来的,不会混入浏览器的默认值造成误差,设计师走查时也不会出现意料之外的几像素偏差。

代价是语义损失:标题看起来不像标题、列表看起来不像列表,所有视觉层级都要从零手工重建,对只读屏幕阅读器等辅助场景也不够友好(比如没有默认样式的列表失去列表语义提示)。因此今天通常采用更温和的 normalize 思路,或两者折中的现代方案;纯 Reset 已经较少单独使用,多作为定制主题体系的第一步基底。

HTML
<style>
  /* 极简 reset */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  ul { list-style: none; }
  h1, h2, h3 { font-size: 100%; font-weight: normal; }
  a { text-decoration: none; color: inherit; }
</style>
<h1>标题被清零后与正文同样大小</h1>
<ul><li>列表没了圆点</li><li>一切从零开始</li></ul>
⚠ 常见误区
🔗 相关词条Sass设计令牌
← 返回来源章节Sass