[筆記] 使用 Normalize.css 時，請記得調整 box-sizing 計算方式 @地瓜大的飛翔旅程

章節連結

緣由
解決方法
參考資料

因應現代瀏覽器的百花齊放，使用 Normalize.css 或是 reset.css 變成一種在頁面剛開始刻劃時的必備操作。這回直接引用 Normalize.css 後，在客製化 grid system 發生了寬度計算上的問題。經過一番研究後，發現緣由是出在 border-box 並沒有一併調整所導致的。

緣由

Normalize.css 的內容，可以詳見 Github 上的內容。不過內容中並沒有全域的 box-sizing 的調整，這樣一來在計算邊框寬度會受影響，進而導致 Grid System 的客製化出現錯誤。

解決方法

將全域的 box-sizing 設置為 border-box 即可。

/* 全域都設 border-box */
*, *::before, *::after {
  box-sizing: border-box;
}


/* 使用繼承方法，讓某些地方仍保留 content-box 的機會 */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}