返回 导航

HTML5 / CSS3

hangge.com

CSS - 项目常用的通用样式汇总1（CSS reset、Normalize.css）

作者：hangge | 2019-09-09 08:10

一、CSS reset（样式重置）

1，什么是 CSS reset？

（1）HTML 标签在浏览器中都有默认的样式，但是不同的浏览器的默认样式存在差别。
  • 例如 ul 默认带有缩进样式，在 IE 下，它的缩进是由 margin 实现的，而在 Firefox 下却是由 padding 实现的。
（2）开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。现在很流行的解决方式是一开始就将浏览器的默认样式全部覆盖掉，从而尽可能地避免跨浏览器的差异，这就是 css reset。
body{
    line-height:1.4;
    color:#333;
    font-family:arial;
    font-size: 12px;
    background:white;
}
input,textarea,select{
    font-size:12px;
    font-size:100%;
    font-family:arial;
    font-family:inherit;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{
    margin:0;
}
h4,h5,h6{
    font-size:1em;
}
ul,ol{
    padding-left:0;
    list-style-type:none;
}
/*image with no-border*/
a img{border:0;}
img{border:0;}

2，Normalize.css 介绍

（1）Normalize.css 是一种 CSS reset 的替代方法。它在默认的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的 CSS reset，Normalize.css 是一种现代的、为 HTML5 准备的优质替代方案。

（2）normalize.css 的目标如下：
  • 保护有用的浏览器默认样式，而不是完全去掉它们。
  • 规范化各种 HTML 元素的样式。
  • 修复浏览器自身的 bug 并保证各浏览器的一致性。
  • 用一些小技巧优化 CSS 可用性。
  • 使用注释和详细文档解释代码。

3，Normalize.css 的安装使用

（1）对于普通的 H5 项目，我们可以到其官网下载最新的 Normalize.css，然后在页面中引入使用。

（2）对于 Vue.js 项目，可以先进入项目文件夹中执行如下命令安装：
npm install --save normalize.css

（3）然后在 vue 的主文件中引入即可： 
import 'normalize.css/normalize.css'
评论

全部评论（0）

回到顶部