浅谈Normalize.css：一种替代CSS resets的方案

最新推荐文章于 2024-08-08 07:26:43 发布

ArtisanLin

最新推荐文章于 2024-08-08 07:26:43 发布

阅读量2.1k

点赞数 2

分类专栏：网站架构文章标签： css

本文链接：https://blog.csdn.net/xjlinme/article/details/72829549

版权

网站架构专栏收录该内容

13 篇文章 0 订阅

订阅专栏

浅谈Normalize.css：一种替代CSS resets的方案

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. —— [ normalize.css ]

前言

为了保证不同浏览器能够尽可能的拥有相同的显示效果，每个开发前端的人员都会使用一个叫做resets的样式来重置浏览器的默认样式。不过通常来说，resets对浏览器默认样式的修改一般都会非常的多，而且几乎覆盖了默认样式的一些特殊效果，比如常用的ul、li标签，所以，为了保留浏览器的默认效果，同时能够兼容大多数浏览器的效果，这才有了Normalize.css的诞生。

使用

Github

使用npm安装：npm install --save normalize.css
引用css：require("normalize.css")

特征

1. 保留了默认的浏览器样式

Normalize.css保留了许多浏览器有用的默认样式，而不需要重新去定义。Normalize.css旨在使那些不同的浏览器风格一致

2. 修复了常见的Bug

Normalize.css解决了常见的PC和移动端的样式Bug，包括HTML5显示的元素、预定义格式的字体大小、IE9中的SVG溢出等

3. 不会使得调试更加的麻烦

Resets会使用大量的继承链，这样会使得调试时元素非常的混乱。而normalize.css会使用非常谨慎的使用多个选择器。

4. 模块化的样式

可以看见normalize.css每个样式的修改都是一个独立的元素选择器，这有利于快速的修改网站所需的样式内容。

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

5. 拥有非常详细的文档

这点对于许多人来说都是非常有用的，能够通过阅读文档知道默认样式被修改的细节。

很多框架、网站都开始使用normalize.css来定义默认的样式，比如Twitter Bootstrap等等。所以，不如也使用normalize.css来开发项目，说不定有额外的Buffer。