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

浅谈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

  1. 使用npm安装:npm install --save normalize.css
  2. 引用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。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值