CSS重置样式表（Reset CSS

CSS重置样式表（Reset CSS）的核心作用是消除不同浏览器的默认样式差异------比如Chrome与Firefox的默认margin、IE的表单元素样式、Safari的链接下划线等，为前端开发提供统一、干净的样式基础，避免因浏览器默认样式导致的布局错乱。

本文提供「通用基础版」和「增强适配版」两款重置样式表，兼顾兼容性（IE8+）和现代开发需求（Flex/Grid、响应式），附详细注释和使用说明，可直接复制到项目中使用。

一、核心设计原则

统一基础样式：清零默认margin/padding，统一字体、行高、列表样式；
保留可访问性：不重置:focus状态、表单默认行为（如复选框选中效果）；
兼容多浏览器：适配IE8+、Chrome、Firefox、Safari等主流浏览器；
支持现代开发：兼容Flex/Grid布局、响应式媒体元素；
低侵入性：仅重置差异样式，不添加多余装饰，留给开发者自由扩展。

二、通用基础版（推荐首选）

适用于绝大多数项目，简洁高效，无冗余样式，可直接使用：

css 复制代码

/* ==============================================
   CSS Reset 基础版（兼容IE8+，现代项目首选）
   ============================================== */
/* 1. 全局盒模型：border/padding包含在width内（解决border影响布局问题） */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 2. 基础元素重置：统一字体、行高、颜色 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; /* 基础字体大小，可按需调整 */
  line-height: 1.5; /* 优化行高，提升可读性 */
  color: #333; /* 基础文本颜色，避免默认灰色过浅 */
  background-color: #fff; /* 页面背景色，可按需修改 */
  -webkit-font-smoothing: antialiased; /* 优化字体渲染（webkit浏览器） */
  -moz-osx-font-smoothing: grayscale; /* 优化字体渲染（Firefox） */
}

/* 3. 标题元素：统一margin，取消默认加粗（如需加粗可自行设置） */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 16px 0; /* 底部间距统一，可按需调整 */
  font-size: inherit; /* 继承父元素字体大小，避免默认过大 */
  font-weight: normal; /* 取消默认加粗，按需自定义 */
}

/* 4. 文本元素：清零默认margin */
p, blockquote, pre,
dl, dd, dt,
figure, figcaption {
  margin: 0 0 16px 0;
}

/* 5. 列表元素：去掉默认列表样式（圆点/数字） */
ul, ol {
  list-style: none; /* 取消默认标记 */
}

/* 6. 链接元素：统一样式，保留可访问性 */
a {
  color: inherit; /* 继承父元素颜色，避免默认蓝色 */
  text-decoration: none; /* 取消默认下划线，按需添加 */
  outline: none; /* 取消默认outline，自定义:focus样式 */
}

a:focus {
  /* 自定义聚焦样式（提升可访问性，避免完全隐藏） */
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* 7. 图片/媒体元素：响应式基础，避免溢出 */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 消除inline默认空隙 */
  max-width: 100%; /* 响应式，不超出父容器 */
  height: auto; /* 保持宽高比 */
  vertical-align: middle; /* 对齐优化 */
}

/* 8. 表单元素：统一样式，消除默认差异 */
input,
button,
select,
textarea {
  font-family: inherit; /* 继承父元素字体，避免默认等宽字体 */
  font-size: inherit; /* 继承字体大小 */
  line-height: inherit; /* 继承行高 */
  color: inherit; /* 继承颜色 */
  background-color: transparent; /* 透明背景，按需自定义 */
  border: none; /* 取消默认边框 */
  padding: 0; /* 清零默认内边距 */
  margin: 0; /* 清零默认外边距 */
  outline: none; /* 取消默认outline */
  appearance: none; /* 取消浏览器默认外观（如select下拉箭头） */
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* 表单元素聚焦样式（统一可访问性） */
input:focus,
button:focus,
select:focus,
textarea:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* 按钮样式：统一光标，消除默认边框 */
button {
  cursor: pointer; /* 鼠标悬浮为指针 */
}

/* 禁用状态样式 */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed; /* 禁用时禁止光标 */
  opacity: 0.6; /* 透明度降低，视觉区分 */
}

/* textarea：禁止默认拉伸，按需自定义 */
textarea {
  resize: none; /* 禁止拉伸，如需允许可设为vertical/horizontal */
}

/* 9. 表格元素：统一边框样式 */
table {
  border-collapse: collapse; /* 合并边框，消除单元格间距 */
  border-spacing: 0; /* 清零间距 */
  width: 100%; /* 默认100%宽度，按需调整 */
}

th, td {
  padding: 0; /* 清零默认内边距 */
  text-align: left; /* 统一文本左对齐 */
  border: none; /* 取消默认边框 */
}

/* 10. 清除浮动：兼容旧布局（可选，现代项目用Flex/Grid可省略） */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 11. 移除默认动画：部分浏览器默认聚焦动画，按需保留 */
:focus-visible {
  outline: none;
}

/* 12. 统一引用样式 */
blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: "";
  content: none;
}

/* 13. 其他元素：清零默认样式 */
address, cite, dfn, em, var {
  font-style: normal; /* 取消默认斜体，按需自定义 */
}

code, kbd, samp, pre {
  font-family: "Courier New", Courier, monospace; /* 统一等宽字体 */
}

small {
  font-size: 100%; /* 继承父元素字体大小，避免默认缩小 */
}

三、增强适配版（含现代开发优化）

在基础版之上，增加「CSS变量、响应式基础、暗模式适配」等功能，适合中大型项目或需要快速迭代的场景：

css 复制代码

/* ==============================================
   CSS Reset 增强版（现代项目+响应式+暗模式）
   ============================================== */
/* 1. 全局配置：CSS变量（统一管理，方便修改） */
:root {
  --color-primary: #0066cc; /* 主色 */
  --color-text: #333; /* 文本色 */
  --color-text-light: #666; /* 浅文本色 */
  --color-bg: #fff; /* 背景色 */
  --color-border: #eee; /* 边框色 */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 16px; /* 基础字体大小 */
  --font-size-sm: 14px; /* 小字体 */
  --font-size-lg: 18px; /* 大字体 */
  --line-height-base: 1.5; /* 基础行高 */
  --spacing-base: 16px; /* 基础间距 */
  --border-radius-base: 4px; /* 基础圆角 */
}

/* 暗模式适配（媒体查询，可配合JS切换） */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #fff;
    --color-text-light: #ccc;
    --color-bg: #1a1a1a;
    --color-border: #333;
  }
}

/* 2. 全局盒模型+基础重置 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

/* 3. 页面基础样式 */
body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh; /* 确保页面至少占满视口高度 */
}

/* 4. 标题元素：统一间距+可自定义大小 */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: calc(var(--spacing-base) / 2);
  font-weight: 600; /* 轻微加粗，提升层级 */
}

h1 { font-size: calc(var(--font-size-base) * 2); }
h2 { font-size: calc(var(--font-size-base) * 1.75); }
h3 { font-size: calc(var(--font-size-base) * 1.5); }
h4 { font-size: calc(var(--font-size-base) * 1.25); }
h5, h6 { font-size: var(--font-size-base); }

/* 5. 文本元素：统一间距 */
p, blockquote, pre,
dl, dd, dt,
figure, figcaption,
hr {
  margin-bottom: var(--spacing-base);
}

hr {
  height: 1px;
  background-color: var(--color-border);
}

/* 6. 列表元素：支持自定义样式 */
ul, ol {
  list-style: none;
}

/* 自定义列表样式（按需启用） */
.list-disc { list-style-type: disc; margin-left: var(--spacing-base); }
.list-decimal { list-style-type: decimal; margin-left: var(--spacing-base); }

/* 7. 链接元素：hover效果+自定义 */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease; /* 平滑过渡 */
}

a:hover, a:active {
  color: #004a99; /* hover深色 */
}

a:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 8. 媒体元素：优化响应式+圆角 */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius-base); /* 统一圆角，按需修改 */
}

/* 9. 表单元素：增强样式+适配 */
input,
button,
select,
textarea {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-base);
  padding: 8px 12px; /* 统一内边距 */
  transition: border-color 0.2s ease;
}

/* 聚焦样式 */
input:focus,
button:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2); /* 聚焦阴影，提升视觉 */
}

/* 按钮样式：区分普通按钮和主要按钮 */
button {
  cursor: pointer;
  background-color: var(--color-bg);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  border-color: var(--color-border);
  box-shadow: none;
}

/* 主要按钮（按需使用） */
.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: #004a99;
  border-color: #004a99;
}

/* 下拉选择框：自定义箭头（解决appearance清除后无箭头问题） */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11l4-4H4l4 4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px; /* 预留箭头空间 */
}

/* textarea：优化滚动条 */
textarea {
  resize: vertical; /* 仅允许垂直拉伸 */
  min-height: 80px; /* 最小高度，提升体验 */
}

/* 复选框/单选框：保留默认样式（避免破坏可访问性） */
input[type="checkbox"],
input[type="radio"] {
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
}

/* 10. 表格元素：增强样式 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin-bottom: var(--spacing-base);
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

th {
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.02); /* 表头轻微背景，提升区分度 */
}

/* 11. 辅助类：快速开发 */
/* 隐藏元素（屏幕阅读器不可见） */
.hidden {
  display: none !important;
}

/* 视觉隐藏（屏幕阅读器可见，页面不可见） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 居中类（配合Flex使用） */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

四、使用说明&最佳实践

1. 使用方法

基础版：直接复制到项目的reset.css文件中，在所有样式文件之前引入（确保优先加载，覆盖浏览器默认样式）；
增强版：根据项目需求修改--color-*、--font-*等CSS变量，再引入项目，可配合SCSS/LESS进一步扩展。

2. 引入顺序（关键！）

html 复制代码

<!-- 1. 重置样式表（最先引入） -->
<link rel="stylesheet" href="reset.css">
<!-- 2. 第三方样式（如UI库、字体图标） -->
<link rel="stylesheet" href="iconfont.css">
<!-- 3. 自定义样式（最后引入，覆盖前面的样式） -->
<link rel="stylesheet" href="style.css">

3. 与Normalize.css的区别（选型建议）

特性	本文重置样式表	Normalize.css
核心思路	清零所有默认样式，提供"空白画布"	保留有用的默认样式，统一差异（不盲目清零）
适用场景	追求完全自定义、无默认样式干扰的项目	希望保留浏览器基础样式（如表单默认行为）、快速开发的项目
灵活性	高（完全自定义，无冗余）	中（保留基础样式，需覆盖的更少）
兼容性	IE8+	IE8+（最新版仅支持IE11+）

选型建议：需要高度自定义（如设计系统、官网）→ 用本文重置样式表；快速开发（如后台管理系统、工具类项目）→ 用Normalize.css。

五、扩展建议

按需裁剪：删除项目中用不到的样式（如表格、表单元素），减小文件体积；
添加字体适配 ：如需支持中文字体，在font-family中添加"Microsoft YaHei", "PingFang SC", sans-serif；
响应式优化 ：在增强版基础上，添加@media查询，适配移动端字体大小：
css 复制代码
```
@media (max-width: 768px) {
  :root {
    --font-size-base: 14px;
    --spacing-base: 12px;
  }
}
```
配合PostCSS ：使用autoprefixer自动添加浏览器前缀（如-webkit-），提升兼容性。

结语

好的CSS重置样式表是前端开发的"地基"------它能减少跨浏览器兼容性问题，让开发者专注于业务样式，而非反复调试默认样式差异。本文提供的两款样式表，兼顾了"通用性"和"灵活性"，可根据项目规模和需求选择使用，也可结合自身项目进一步定制（如添加专属颜色变量、组件基础样式）。

使用时需注意引入顺序，避免被其他样式覆盖，同时保留可访问性样式（如:focus状态），确保项目兼容键盘导航和屏幕阅读器。