Reset 是最早期的统一思路:既然各浏览器默认样式各不相同,就把 body 外边距、ul 圆点、h1 到 h6 的字号粗细、链接下划线、表格边框间距等全部归零,所有浏览器渲染起点完全一致。它让像素级还原设计稿更容易,因为页面上每一个间距和外观都是你显式写出来的,不会混入浏览器的默认值造成误差,设计师走查时也不会出现意料之外的几像素偏差。
代价是语义损失:标题看起来不像标题、列表看起来不像列表,所有视觉层级都要从零手工重建,对只读屏幕阅读器等辅助场景也不够友好(比如没有默认样式的列表失去列表语义提示)。因此今天通常采用更温和的 normalize 思路,或两者折中的现代方案;纯 Reset 已经较少单独使用,多作为定制主题体系的第一步基底。
<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>