CSS reset和normalize.css的区别

Epicurus
229 阅读3分钟

CSS reset和normalize.css的区别

CSS Reset 和 Normalize.css 是两种常见的 CSS 工具，用于解决浏览器默认样式不一致的问题。它们的目标是让网页在不同浏览器中表现一致，但实现方式和理念有所不同。

1. CSS Reset

定义

CSS Reset 是一种通过重置所有浏览器的默认样式来消除浏览器之间差异的方法。它将大多数 HTML 元素的样式重置为统一的基础值。

特点

  1. 全局重置：

    • 将所有元素的默认样式（如 margin、padding、font-size 等）重置为 0 或统一值。
    • 示例： 
      * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

  2. 无默认样式：

    • 移除浏览器的默认样式，开发者需要从头定义所有样式。

  3. 一致性：

    • 通过重置样式，确保所有浏览器从相同的基准开始。

  4. 常用库：

优点

  • 完全控制样式，避免浏览器默认样式的干扰。
  • 适合需要高度自定义设计的项目。

缺点

  • 需要从头定义所有样式，增加了开发工作量。
  • 可能破坏某些语义化元素的默认行为（如 <strong>、<em> 的加粗和斜体效果）。

2. Normalize.css

定义

Normalize.css 是一种通过修复浏览器默认样式的 bug 和不一致性来实现跨浏览器一致性的方法。它保留了有用的默认样式，而不是完全重置。

特点

  1. 修复不一致性：

    • 修复浏览器之间的样式差异，而不是完全移除默认样式。
    • 示例： 
      html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

  2. 保留有用样式：

    • 保留语义化元素的默认样式（如 <strong>、<em> 的加粗和斜体效果）。

  3. 增强可用性：

    • 修复了一些常见的浏览器 bug，并增强了表单元素的可用性。

  4. 常用库：

优点

  • 保留有用的默认样式，减少开发工作量。
  • 修复浏览器 bug，增强跨浏览器一致性。
  • 更适合需要快速开发的项目。

缺点

  • 不能完全消除浏览器默认样式的影响。
  • 对于需要高度自定义设计的项目，可能需要额外覆盖样式。

3. 对比总结

特性CSS ResetNormalize.css
目标完全重置浏览器默认样式修复浏览器默认样式的不一致性
默认样式移除所有默认样式保留有用的默认样式
开发工作量较大，需要从头定义样式较小，保留部分默认样式
适用场景需要高度自定义设计的项目需要快速开发、保留默认样式的项目
语义化元素可能破坏语义化元素的默认行为保留语义化元素的默认行为
浏览器一致性通过重置实现一致性通过修复实现一致性

4. 选择建议

  • 使用 CSS Reset 的场景：

    • 需要完全控制样式，从头定义所有设计。
    • 项目对浏览器默认样式有严格要求。
    • 示例：高度定制的企业官网、创意设计类网站。

  • 使用 Normalize.css 的场景：

    • 需要快速开发，保留部分默认样式。
    • 项目对浏览器默认样式没有严格要求。
    • 示例：内容型网站、博客、后台管理系统。

5. 实际应用示例

CSS Reset 示例

/* Eric Meyer's Reset CSS */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, code, img, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

Normalize.css 示例

/* Normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

总结

  • CSS Reset 通过完全重置样式来实现一致性，适合高度自定义的项目。
  • Normalize.css 通过修复样式不一致性来实现一致性，适合快速开发的项目。
  • 根据项目需求选择合适的工具，或者结合两者使用。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github

avatar
文章
阅读
粉丝