整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
HTML標(biāo)簽在瀏覽器里有默認(rèn)的樣式，例如 p 標(biāo)簽有上下邊距，strong標(biāo)簽有字體加粗樣式，em標(biāo)簽有字體傾斜樣式。不同瀏覽器的默認(rèn)樣式之間也會(huì)有差別，例如ul默認(rèn)帶有縮進(jìn)的樣式，在IE下，它的縮進(jìn)是通過(guò)margin實(shí)現(xiàn)的，而Firefox下，它的縮進(jìn)是由padding實(shí)現(xiàn)的。在切換頁(yè)面的時(shí)候，瀏覽器的默認(rèn)樣式往往會(huì)給我們帶來(lái)麻煩，影響開發(fā)效率。所以解決的方法就是一開始就將瀏覽器的默認(rèn)樣式全部去掉，更準(zhǔn)確說(shuō)就是通過(guò)重新定義標(biāo)簽樣式。"覆蓋"瀏覽器的CSS默認(rèn)屬性。最最簡(jiǎn)單的說(shuō)法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉!這就是CSS reset。
CSS reset 可以將瀏覽器默認(rèn)的樣式清除掉，這樣做會(huì)使我們的 CSS 或 html 標(biāo)簽更加方便準(zhǔn)確。假如我們不初始化 CSS 樣式屬性，將會(huì)增大 CSS 代碼量，所以使用初始化文件會(huì)為我們節(jié)約網(wǎng)頁(yè)代碼，節(jié)約網(wǎng)頁(yè)下載時(shí)間；還會(huì)使得我們開發(fā)網(wǎng)頁(yè)內(nèi)容時(shí)更加方便簡(jiǎn)潔，不用考慮很多。為什么我們不建議使用通配符？
我們有的時(shí)候會(huì)使用* {padding:0;margin:0;}來(lái)清除瀏覽器的一些樣式，這種方式很實(shí)用，*號(hào)匹配所有元素，省去了一個(gè)一個(gè)寫元素名稱的麻煩。但是它在性能方面是會(huì)對(duì)頁(yè)面造成影響的，試想一下，你的頁(yè)面非常豐富，嵌套多、元素多，這時(shí)候，*號(hào)會(huì)去每一個(gè)元素都去渲染一遍。而我們通常只需要對(duì)表格、列表、標(biāo)題等標(biāo)簽進(jìn)行初始化樣式。
愛的JAVA醬們： 更多技術(shù)交流者或想獲取JAVA資料請(qǐng)掃描二維碼加微信（858568103）
擊上方藍(lán)字關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識(shí)，搞懂一個(gè)問(wèn)題！
為了解決不同瀏覽器之間的一些行為差異，前端都會(huì)在代碼里加一段CSSReset代碼，來(lái)將所有的元素設(shè)置統(tǒng)一的樣式，從而保證我們能在一個(gè)統(tǒng)一的樣式下開始開發(fā)項(xiàng)目。
大多數(shù)人，這部分代碼都不愿意手動(dòng)去寫，經(jīng)常會(huì)用一些現(xiàn)有的庫(kù)來(lái)處理這部分工作，如normalize.css，minireset等等。其實(shí)這里面有好多冗余的CSS代碼。我一般不太喜歡這么搞。
然而，如果你也是和我一樣，是自己去寫這部分代碼的話，我建議你往里加一行代碼，如下所示：
如上面代碼所示，margin和padding沒(méi)什么奇怪的，主要注意box-sizing我設(shè)置了border-box。
對(duì)的，所有的DOM的都應(yīng)該為border-box。如果有人對(duì)box-sizing不是很了解的話，那么，下面，接下來(lái)我就給大家理清一下它的用法。（之前，我的文章里有寫過(guò)它的詳細(xì)用法，可以參考）
它主要有兩種取值：
1、content-box
當(dāng)設(shè)置某個(gè)元素的寬高（width/height）時(shí)，僅僅會(huì)作用于其內(nèi)容尺寸。其它，所有的padding和margin都是在其之上的累加。
比如：有個(gè)DIV設(shè)置width=80，padding=10，那么最終元素占用100（80+2*10）像素。
2、border-box
記住，padding和margin是包含在了寬高之內(nèi)的。
比如，有個(gè)DIV設(shè)置width=80，padding=10，marign=10那么最終元素占用80（40+2*10+2*10）像素。
總結(jié)一下：
在重置代碼里將元素設(shè)置為border-box會(huì)很方便我們進(jìn)行樣式布局。比如可以在父元素設(shè)置高度限制而不擔(dān)心子元素的內(nèi)邊距或者邊框來(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è)置或返回重置按鈕的名稱。 | Yes |
| type | 返回重置按鈕的表單元素類型。 | Yes |
| value | 設(shè)置或返回重置按鈕上顯示的文本。 | Yes |
標(biāo)準(zhǔn)屬性和事件
Reset 對(duì)象同樣支持標(biāo)準(zhǔn)的 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
