我們?cè)陂_(kāi)發(fā)的時(shí)候會(huì)發(fā)現(xiàn)很多樣式都自帶了各自特有的默認(rèn)樣式,而這樣樣式通常會(huì)被遺忘,導(dǎo)致樣式調(diào)整起來(lái)很繁瑣。為了讓樣式統(tǒng)一,我們?cè)陂_(kāi)發(fā)的時(shí)候通常會(huì)對(duì)一些元素進(jìn)行樣式重置,已避免默認(rèn)樣式影響開(kāi)發(fā)。Normalize.css就是一個(gè)這樣的CSS樣式文件,它的作用就是讓HTML元素更好的實(shí)現(xiàn)跨瀏覽器一致性。
標(biāo)準(zhǔn)化的樣式,適用于大部分HTML元素;
保留有用的瀏覽器默認(rèn)樣式,而不是全部樣式“重置”;
修復(fù)了瀏覽器BUG并保證瀏覽器樣式的一致性;
優(yōu)化了CSS樣式提高了易用性;
獨(dú)立模塊化開(kāi)發(fā),支持樣式自定義;
支持大部分主流瀏覽器,如Chrome、Firefox、Opera 、Safari、Internet Explorer 等(包括移動(dòng)瀏覽器);
擁有詳細(xì)的文檔,上手容易。
在Vue中安裝Normalize.css很簡(jiǎn)單,還是老套路 :npm install normalize.css --save,當(dāng)前版本8.0.1。
在node_modules/normalize.css目錄中我們可以找到normalize.css文件,我們可以看到每個(gè)元素前面都有詳細(xì)的注釋文檔描述。Normalize支持大部分主流瀏覽器,同時(shí)對(duì)HTML5元素、排版、列表、嵌入式內(nèi)容、表單和表格等都進(jìn)行了規(guī)范化,是一種現(xiàn)代的、為HTML5準(zhǔn)備的CSS重置替代方案。
在main.js中我們引入normalize.css樣式:import 'normalize.css/normalize.css',這樣我們就可以將normalize.css作為項(xiàng)目的基礎(chǔ)CSS樣式并在此基礎(chǔ)上構(gòu)建我們的項(xiàng)目,當(dāng)然如果默認(rèn)值不符合我們的樣式需求時(shí)我們統(tǒng)一可以通過(guò)自定義樣式來(lái)覆蓋默認(rèn)值。
更多Vue實(shí)戰(zhàn)技巧可以參考我的專(zhuān)欄:Vue實(shí)戰(zhàn)系列
歡迎關(guān)注本人的公眾號(hào):編程手札
或者搜索公眾微信號(hào):ProgramNotes,文章也會(huì)在公眾號(hào)更新
大有學(xué)問(wèn)#
CSS初始化是指重設(shè)瀏覽器的樣式且每個(gè)網(wǎng)頁(yè)都必須進(jìn)行初始化。
以下內(nèi)容均屬于CSS樣式。可以在html文件的style中設(shè)置,也可單獨(dú)另立css文件外鏈到html文件中。
1.清除所有標(biāo)簽的內(nèi)外邊距清零
* {
margin: 0;
padding: 0;
}
2.li標(biāo)簽:去除樣式符號(hào)
li {
list-style: none;
}
3.圖片標(biāo)簽:取消圖片底側(cè)有空白縫隙問(wèn)題
img {
vertical-align: middle;
}
5.超鏈接文本標(biāo)簽:字體顏色和下劃線去除
a {
color: black;
text-decoration: none;
}
6.清除浮動(dòng)
.clearF {
clear: both;
}
這些目前我所用到的初始化設(shè)置,后續(xù)實(shí)戰(zhàn)開(kāi)發(fā)時(shí)可按個(gè)人習(xí)慣增減。
到現(xiàn)在才是對(duì)CSS有了一些初步的認(rèn)識(shí)。
之后學(xué)習(xí)HTML5和CSS3新特性,更要好好的夯實(shí)基礎(chǔ)。
就如同蓋樓需要先打地基,地基打的好且穩(wěn),高樓才能穩(wěn)。
再次忠告自身,切勿好高騖遠(yuǎn),切勿眼高手低。
腳踏實(shí)地,走好每一步路,敲好每一行代碼。
寶劍鋒從磨礪出,梅花香自苦寒來(lái)。
拜~
Reset 對(duì)象
在 HTML 表單中 <input type="reset"> 標(biāo)簽每出現(xiàn)一次,一個(gè) Reset 對(duì)象就會(huì)被創(chuàng)建。
當(dāng)重置按鈕被點(diǎn)擊,包含它的表單中所有輸入元素的值都重置為它們的默認(rèn)值。默認(rèn)值由 HTML value 屬性或 JavaScript 的 defaultValue 屬性指定。
重置按鈕在重置表單之前觸發(fā) onclick 句柄,并且這個(gè)句柄可以通過(guò)返回 fasle 來(lái)取消。
您可以通過(guò)遍歷表單的 elements[] 數(shù)組來(lái)訪問(wèn)某個(gè)重置按鈕,或者通過(guò)使用document.getElementById()。
Reset 對(duì)象屬性
W3C: W3C 標(biāo)準(zhǔn)。
屬性 | 描述 | W3C |
---|---|---|
disabled | 設(shè)置或返回重置按鈕是否應(yīng)被禁用。 | Yes |
form | 返回一個(gè)對(duì)包含此重置按鈕的表單對(duì)象的引用。 | Yes |
name | 設(shè)置或返回重置按鈕的名稱(chēng)。 | Yes |
type | 返回重置按鈕的表單元素類(lèi)型。 | Yes |
value | 設(shè)置或返回重置按鈕上顯示的文本。 | Yes |
標(biāo)準(zhǔn)屬性和事件
Reset 對(duì)象同樣支持標(biāo)準(zhǔn)的 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。