前言

他的重要性是甚麼？他的功用是甚麼？觀看網頁的東西是瀏覽器，不同瀏覽器的外觀不同，渲染出的畫面也不同，支援的功能也不盡相同，也有可能某些程式、功能是不支援。

所以，我不做任何設定，網頁的外觀會長甚麼樣子？每個瀏覽器渲染出來的效果會相同嗎？

為甚麼我的字不會靠邊，為甚麼我的標題與邊邊距例這麼遠？

事實上，瀏覽器會有自己內建 css 樣式，網頁的外觀會依靠瀏覽器自帶的樣式做呈現。如果不依照瀏覽器自帶的樣式，我們的每個東西都會長得一模一樣，無法辨別哪個是標題、哪個是內文、哪個是清單。

所以，每個瀏覽器都會自帶樣式檔案，去呈現網頁外觀，解決上述問題，避免開發者未設定樣式全部一模一樣的慘況。

這時，css reset 需求就來了~因為如果各個瀏覽器的外觀都不同，距離到底誰產生？padding or margin？到底是寫在哪個標籤 body 還是 html？ A：depend on different browser。

這些問題就會導致設計、觀看網頁外觀，不好處理。

設計網頁第一步、CSS reset

css reset 會將網頁中所有元素預設外觀設定成一模一樣，包含：行距、間距、margin、padding、清單樣式...。

優點：所有元素自己設定，可以百百掌握網頁外觀
缺點：too over

作法：將 css reset 開一個 css 檔案，在專案中 link 進來。

所有東西歸零，對後台編輯有一定程度的麻煩，所以針對不需要重設的東西我保留，針對瀏覽器差異化的地方再做處理。

CSS Reset 的作用是甚麼？將網頁中所有元素預設外觀設定成一模一樣
為何需要使用 CSS Reset？解決不同瀏覽器網頁設計不同，不好處理的問題
CSS Reset 在專案中怎麼使用？開一個新的 css reset file 再將他 link 進 html
Normalize.css 的用途跟目的？也是為了解決不同瀏覽器網頁設計預設 css 樣式不同的困擾，目的和 css reset 相同，但和 css reset 最大的差異在於 css reset 會將所有元素一模一樣化，而 css.normalize 僅針對有瀏覽器差異化的地方做處理，並非將所有元素都歸零。

新手先用 css reset 等到能夠完全整控網頁，再用 css normalize，會比較輕鬆。否則再使用 css normalize 要先知道他設定了甚麼。