整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Vue实战049:引入Normalize.css样式初始化

ormalize.css简介

我们在开发的时候会发现很多样式都自带了各自特有的默认样式,而这样样式通常会被遗忘,导致样式调整起来很繁琐。为了让样式统一,我们在开发的时候通常会对一些元素进行样式重置,已避免默认样式影响开发。Normalize.css就是一个这样的CSS样式文件,它的作用就是让HTML元素更好的实现跨浏览器一致性。

Normalize.css 特点

标准化的样式,适用于大部分HTML元素;

保留有用的浏览器默认样式,而不是全部样式“重置”;

修复了浏览器BUG并保证浏览器样式的一致性;

优化了CSS样式提高了易用性;

独立模块化开发,支持样式自定义;

支持大部分主流浏览器,如Chrome、Firefox、Opera 、Safari、Internet Explorer 等(包括移动浏览器);

拥有详细的文档,上手容易。

安装Normalize.css

在Vue中安装Normalize.css很简单,还是老套路 :npm install normalize.css --save,当前版本8.0.1。

normalize.css文件

在node_modules/normalize.css目录中我们可以找到normalize.css文件,我们可以看到每个元素前面都有详细的注释文档描述。Normalize支持大部分主流浏览器,同时对HTML5元素、排版、列表、嵌入式内容、表单和表格等都进行了规范化,是一种现代的、为HTML5准备的CSS重置替代方案。

项目中引入

在main.js中我们引入normalize.css样式:import 'normalize.css/normalize.css',这样我们就可以将normalize.css作为项目的基础CSS样式并在此基础上构建我们的项目,当然如果默认值不符合我们的样式需求时我们统一可以通过自定义样式来覆盖默认值。

更多Vue实战技巧可以参考我的专栏:Vue实战系列

欢迎关注本人的公众号:编程手札

或者搜索公众微信号:ProgramNotes,文章也会在公众号更新

大有学问#

什么是CSS初始化?

CSS初始化是指重设浏览器的样式且每个网页都必须进行初始化。

以下内容均属于CSS样式。可以在html文件的style中设置,也可单独另立css文件外链到html文件中。

1.清除所有标签的内外边距清零

* {
    margin: 0;
    padding: 0;
}

2.li标签:去除样式符号

li {
    list-style: none;
}

3.图片标签:取消图片底侧有空白缝隙问题

img {
    vertical-align: middle;
}

5.超链接文本标签:字体颜色和下划线去除

a {
    color: black;
    text-decoration: none;
}

6.清除浮动

.clearF {
    clear: both;
}

这些目前我所用到的初始化设置,后续实战开发时可按个人习惯增减。

到现在才是对CSS有了一些初步的认识。

之后学习HTML5和CSS3新特性,更要好好的夯实基础。

就如同盖楼需要先打地基,地基打的好且稳,高楼才能稳。

再次忠告自身,切勿好高骛远,切勿眼高手低。

脚踏实地,走好每一步路,敲好每一行代码。

宝剑锋从磨砺出,梅花香自苦寒来。

拜~

Reset 对象

在 HTML 表单中 <input type="reset"> 标签每出现一次,一个 Reset 对象就会被创建。

当重置按钮被点击,包含它的表单中所有输入元素的值都重置为它们的默认值。默认值由 HTML value 属性或 JavaScript 的 defaultValue 属性指定。

重置按钮在重置表单之前触发 onclick 句柄,并且这个句柄可以通过返回 fasle 来取消。

您可以通过遍历表单的 elements[] 数组来访问某个重置按钮,或者通过使用document.getElementById()。

Reset 对象属性

W3C: W3C 标准。

属性描述W3C
disabled设置或返回重置按钮是否应被禁用。Yes
form返回一个对包含此重置按钮的表单对象的引用。Yes
name设置或返回重置按钮的名称。Yes
type返回重置按钮的表单元素类型。Yes
value设置或返回重置按钮上显示的文本。Yes

标准属性和事件

Reset 对象同样支持标准的 属性 和 事件。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!