CSS - 项目常用的通用样式汇总1(CSS reset、Normalize.css)
一、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'