编程马·菜鸟教程

Appearance

CSS重置与normalize.css（统一浏览器样式） ​

18.1 为什么需要CSS重置？ ​

问题描述 ​

不同浏览器对HTML元素的默认样式有不同的定义，这会导致网页在不同浏览器中显示不一致。

常见差异 ​

  • 边距：不同浏览器对body、h1-h6、p等元素的默认margin不同
  • 内边距：ul、ol等列表元素的默认padding不同
  • 字体：默认字体和字体大小不同
  • 边框：table、input等元素的默认边框样式不同

解决方案 ​

使用CSS重置（CSS Reset）或normalize.css来统一浏览器默认样式。

18.2 新手常用CSS重置代码 ​

基础重置 ​

css
/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea {
  font-family: inherit;
}

完整重置 ​

css
/* 完整CSS重置 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

18.3 normalize.css ​

什么是normalize.css？ ​

normalize.css是一个替代CSS重置的方案，它保留了有用的浏览器默认样式，同时修复了浏览器之间的差异。

与CSS重置的区别 ​

特性CSS Resetnormalize.css
策略全部重置为0保留有用样式
文件大小较小稍大
可维护性需要重新定义所有样式更易于维护
兼容性需要测试经过充分测试

如何使用normalize.css ​

  1. 下载文件：从normalize.css官网下载
  2. 引入文件：
html
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="your-styles.css">
  1. CDN引入：
html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

normalize.css的主要内容 ​

css
/* 部分normalize.css代码 */

/* 统一行高 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* 统一body样式 */
body {
  margin: 0;
}

/* 统一标题样式 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* 统一链接样式 */
a {
  background-color: transparent;
}

/* 统一图片样式 */
img {
  border-style: none;
}

/* 统一表单样式 */
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

18.4 实战：给页面添加CSS重置 ​

实战目标 ​

创建一个页面，展示添加CSS重置前后的效果对比。

实战步骤 ​

  1. 创建HTML文件：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS重置实战</title>
  <!-- 引入CSS重置 -->
  <style>
    /* CSS重置代码 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      line-height: 1.6;
      color: #333;
    }

    ul, ol {
      list-style: none;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    button {
      cursor: pointer;
      border: none;
      background: none;
    }

    /* 页面样式 */
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }

    h1 {
      text-align: center;
      color: #333;
      margin-bottom: 30px;
      font-size: 28px;
    }

    h2 {
      color: #555;
      margin: 30px 0 15px;
      font-size: 22px;
    }

    h3 {
      color: #666;
      margin: 20px 0 10px;
      font-size: 18px;
    }

    p {
      margin-bottom: 15px;
      color: #666;
    }

    ul {
      margin-bottom: 20px;
      padding-left: 20px;
    }

    ul li {
      margin-bottom: 8px;
      color: #666;
    }

    .demo-section {
      background-color: #f9f9f9;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    .btn {
      display: inline-block;
      padding: 10px 20px;
      background-color: #3498db;
      color: white;
      border-radius: 4px;
      margin: 5px;
      transition: background-color 0.3s;
    }

    .btn:hover {
      background-color: #2980b9;
    }

    .card {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>CSS重置实战</h1>
    
    <div class="demo-section">
      <h2>标题样式</h2>
      <h1>一级标题</h1>
      <h2>二级标题</h2>
      <h3>三级标题</h3>
    </div>
    
    <div class="demo-section">
      <h2>段落和列表</h2>
      <p>这是一个段落。通过CSS重置，我们可以统一不同浏览器中的默认样式，确保页面在所有浏览器中显示一致。</p>
      <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
      </ul>
    </div>
    
    <div class="demo-section">
      <h2>按钮样式</h2>
      <button class="btn">按钮1</button>
      <button class="btn">按钮2</button>
      <button class="btn">按钮3</button>
    </div>
    
    <div class="card">
      <h2>卡片组件</h2>
      <p>这是一个卡片组件，展示了CSS重置后的统一效果。所有元素的边距、内边距都已经被重置，我们可以从头开始定义自己的样式。</p>
    </div>
  </div>
</body>
</html>
  1. 运行页面：在浏览器中打开文件，观察效果

预期效果 ​

  • 统一的外观：所有浏览器中显示一致
  • 干净的起点：没有浏览器默认样式的干扰
  • 易于定制：可以从头开始定义自己的样式

最佳实践 ​

  1. 在样式表最前面引入CSS重置
  2. 根据项目需求选择合适的重置方案
  3. 测试不同浏览器中的显示效果
  4. 保持重置代码的简洁性
  5. 考虑使用normalize.css替代完全重置

总结 ​

CSS重置是前端开发的重要步骤，它能够：

  • 统一不同浏览器的默认样式
  • 减少浏览器兼容性问题
  • 提供更可控的开发环境
  • 使样式代码更加可预测

选择合适的重置方案（基础重置、完整重置或normalize.css），可以让你的CSS开发更加高效和可靠。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建