HTML標簽在瀏覽器里有默認的樣式，例如 p 標簽有上下邊距，strong標簽有字體加粗樣式，em標簽有字體傾斜樣式。不同瀏覽器的默認樣式之間也會有差別，例如ul默認帶有縮進的樣式，在IE下，它的縮進是通過margin實現的，而Firefox下，它的縮進是由padding實現的。在切換頁面的時候，瀏覽器的默認樣式往往會給我們帶來麻煩，影響開發效率。所以解決的方法就是一開始就將瀏覽器的默認樣式全部去掉，更準確說就是通過重新定義標簽樣式。"覆蓋"瀏覽器的CSS默認屬性。最最簡單的說法就是把瀏覽器提供的默認樣式覆蓋掉!這就是CSS reset。

CSS reset 可以將瀏覽器默認的樣式清除掉，這樣做會使我們的 CSS 或 html 標簽更加方便準確。假如我們不初始化 CSS 樣式屬性，將會增大 CSS 代碼量，所以使用初始化文件會為我們節約網頁代碼，節約網頁下載時間；還會使得我們開發網頁內容時更加方便簡潔，不用考慮很多。為什么我們不建議使用通配符？

我們有的時候會使用* {padding:0;margin:0;}來清除瀏覽器的一些樣式，這種方式很實用，*號匹配所有元素，省去了一個一個寫元素名稱的麻煩。但是它在性能方面是會對頁面造成影響的，試想一下，你的頁面非常豐富，嵌套多、元素多，這時候，*號會去每一個元素都去渲染一遍。而我們通常只需要對表格、列表、標題等標簽進行初始化樣式。

愛的JAVA醬們： 更多技術交流者或想獲取JAVA資料請掃描二維碼加微信（858568103）

擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

為了解決不同瀏覽器之間的一些行為差異，前端都會在代碼里加一段CSSReset代碼，來將所有的元素設置統一的樣式，從而保證我們能在一個統一的樣式下開始開發項目。

大多數人，這部分代碼都不愿意手動去寫，經常會用一些現有的庫來處理這部分工作，如normalize.css，minireset等等。其實這里面有好多冗余的CSS代碼。我一般不太喜歡這么搞。

一、加行代碼

然而，如果你也是和我一樣，是自己去寫這部分代碼的話，我建議你往里加一行代碼，如下所示：

如上面代碼所示，margin和padding沒什么奇怪的，主要注意box-sizing我設置了border-box。

二、解釋代碼

對的，所有的DOM的都應該為border-box。如果有人對box-sizing不是很了解的話，那么，下面，接下來我就給大家理清一下它的用法。（之前，我的文章里有寫過它的詳細用法，可以參考）

它主要有兩種取值：

1、content-box

當設置某個元素的寬高（width/height）時，僅僅會作用于其內容尺寸。其它，所有的padding和margin都是在其之上的累加。

比如：有個DIV設置width=80，padding=10，那么最終元素占用100（80+2*10）像素。

2、border-box

記住，padding和margin是包含在了寬高之內的。

比如，有個DIV設置width=80，padding=10，marign=10那么最終元素占用80（40+2*10+2*10）像素。

總結一下：

在重置代碼里將元素設置為border-box會很方便我們進行樣式布局。比如可以在父元素設置高度限制而不擔心子元素的內邊距或者邊框來打破這種限制。

Reset 對象

在 HTML 表單中 <input type="reset"> 標簽每出現一次，一個 Reset 對象就會被創建。

當重置按鈕被點擊，包含它的表單中所有輸入元素的值都重置為它們的默認值。默認值由 HTML value 屬性或 JavaScript 的 defaultValue 屬性指定。

重置按鈕在重置表單之前觸發 onclick 句柄，并且這個句柄可以通過返回 fasle 來取消。

您可以通過遍歷表單的 elements[] 數組來訪問某個重置按鈕，或者通過使用document.getElementById()。

Reset 對象屬性

W3C: W3C 標準。

標準屬性和事件

Reset 對象同樣支持標準的 屬性 和 事件。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！