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，我們一起飛！

在線咨詢

上一篇：HTML文檔元素
下一篇：Plotly數據可視化：離線版、微軟vscode版的Python的基本作圖

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商