點擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
為了解決不同瀏覽器之間的一些行為差異，前端都會在代碼里加一段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會很方便我們進行樣式佈局。比如可以在父元素設置高度限制而不擔心子元素的內邊距或者邊框來打破這種限制。
閱讀更多 小鄭搞碼事 的文章
