CSS Reset 必備知識與Bootstrap CSS Reset

15th鐵人賽 bootstrap5 前端超實用框架: bootstrap 入門到實戰教學 css reset

阿沁

2023-09-17 00:31:42

1012 瀏覽

分享至

CSS Reset知識

何謂 CSS Reset

CSS Reset(CSS重置)，是網頁設計中一個重要的概念，用來清除不同瀏覽器(EX:Chrome、Firefox、Internet Explorer等)之間的樣式差異。當我們在網頁設計中使用CSS（層疊樣式表）來控制網頁的外觀和風格時，不同瀏覽器可能會對相同的HTML元素、CSS樣式有不同的解釋，這種差異可能會導致不一樣的外觀。為了解決這個問題，CSS Reset就變得很重要。

CSS Reset 的原理

CSS Reset的原理是通過將所有瀏覽器的默認樣式歸零（或是統一樣式），從而建立一個統一的基礎樣式，讓我們設計網頁時可以更容易地自定義網頁外觀。

CSS Reset種類介紹

1.Eric Meyer's Reset

Eric Meyer's Reset CSS是CSS Reset中的經典之一。它把所有HTML元素的樣式都清空了。這包括將所有外邊距、內邊距、列表樣式等都強制歸零。
例如此 CodePen範例的h1~h6、p標籤內文字大小被設定為統一100%(預設16px)。

示例代碼：

/* Eric Meyer's Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
}
/* More reset styles... */

特色:

統一、重置了各個瀏覽器的樣式設定。
必須全部重新做設定，而且reset 樣式一大坨不容易閱讀。

2. Normalize.css

(因為內容多，可看官方文件)
Normalize.css是另一種CSS Reset方法，它與 meyerweb CSS 最大差異在於它保留了瀏覽器預設的樣式，而它的特色有以下：

保護有用的瀏覽器預設樣式而不是完全去掉它們，使網站開發者可以不用針對每一個標籤重新寫樣式
修正瀏覽器本身的 Bug
詳細文檔提供註解

比起傳統的CSS reset，Normalize.css是一種現代的、為HTML5準備的優質替代方案。
它也被用於例如Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網站上。
瞭解更多可以看這篇Normalize.css簡介、使用

套用Bootstrap

Bootstrap是使用 Normalize.css。
但因為Bootstrap是全面性UI框架，會有一點點微調
(例如: Bootstrap是 box-sizing: border-box;，而Normalize.css是box-sizing: content-box;)
而Bootstrap的 Css Reset放在 reboot.css 檔案中，所以當你導入Bootstrap時，也同時套用了它的Css Reset。

在套用Bootstrap後我們會發現的變化: