[ CSS ] 什麼是 CSS Reset？
閱讀時間約 2 分鐘
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
CSS Reset 的用途
不同的瀏覽器會有自己的預設樣式，這可能會導致我們的網頁在不同瀏覽器中長不一樣，如果針對每個瀏覽器去微調程式碼，光想就覺得很麻煩，也不好維護和管理。為了解決這個問題，就有了「CSS Reset」這個東東。它讓開發者可以從一個統一的基準開始設計網頁，確保所有元素在所有瀏覽器中都有一致的外觀，這樣可以更準確地控制頁面的排版和樣式。常見的 CSS Reset 有 Reset.css 和 Normalize.css，它們通過覆蓋瀏覽器的預設樣式來達到這個目的。
Reset 和 Normalize 比較
Reset.css
徹底清除瀏覽器的所有預設樣式。使用 CSS Reset 後，所有 HTML 元素在各個瀏覽器中會有一個完全統一的起點，可是這也代表很多基本樣式都需要開發者重新設定。
Normalize.css
旨在使瀏覽器的樣式更加一致，同時保留有用的預設值。Normalize.css 會修正瀏覽器之間的差異，同時保持了標準的 HTML 元素樣式，這使得它在不過度重設的情況下提供一個更好的基礎樣式。
聽起來就很像你要搬進一個新家，其中一個是空空的房子 (Reset.css)，一個還有留基本家具 (Normalize.css)，有的人喜歡從頭全部自己打造，有的人覺得有基本家具比較方便，沒有絕對的好與壞，端看自己的需求。
其他 CSS Reset
除了上述常見的兩個版本外，主流 CSS 框架也會依照框架的需求設計自己的 CSS Reset，例如：Bootstrap 的 Reboot (基於 Normalize)，還有 Tailwind 的 Preflight (基於 modern-normalize )，或者我們也可以依照個人或公司的需求設計自己專屬的 CSS Reset。
參考資料
- chatgpt
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
本篇是Tailwind CSS系列文章的第一篇，就用輕鬆的閒聊方式來認識一下Tailwind CSS，讓你知道它的魅力所在。Tailwind CSS是一種「Utility-First」的CSS設計模式，提供非常多預先定義好的class給開發者使用，直接加在HTML上就能直接使用，協助開發者更快的開發
不論是在基礎或是進階的版面排列，幾乎離開不了 position 系列的 CSS 語法，如果對於這些語法不熟悉，要快速完成畫面需求幾乎是不可能的，甚至會延宕整個團隊的開發速度（對，position 語法就是這麽重要）。
source code:
E
提供兩個範例，其實before, after就如同字面上的意思，會在前後加上內容。
範例1簡單的在前後加上文字，如下所示，需特別注意，是在div內的範例1前後加上文字。
before/after除了可以加上文字以外，還可以作為裝飾效果。如範例2，利用position調
css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。
如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。
E
css grid colspan sample code:
筆記一下，原本寫成overflow-y: auto，在windows chrome瀏覽器有y scroll bar，唯獨iPad沒有scroll bar，解法如下:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
本筆記參考:
1. h
對於前端初學者來說，在切版時會出現很多規則、不規則的網頁區塊，這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。
明明想要某個欄位的寬高為 200px，卻發現自己不知道為什麼怎麼更改都會改不動，又或者寬高更改了，卻沒有辦法與其他元素並列。
上述的狀況，通常都是在不熟悉 HTML display 特性而產生的狀況下才會出現⋯⋯
與HTML不同，CSS是專門修改網頁內容「樣式」的程式語言，也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容，但你可以透過HTML新增網頁內容後，再使用CSS去修改他的樣式，例如⋯⋯
有時我們會在CSS裡看到「>」、「+」、「~」這些符號的使用，它們到底有甚麼功用呢？
A.大於符號(>)
大於(>)就是選取底下直接的子元素。
以大於符號(.box > p)和空格(.box p)來做比較，先看以下例子：
使用空格的情況
.box p{ font-size:20px; color
CSS提供許多選擇器類型，當使用不同的選擇器時，套用樣式的優先權也會不同。
A.元素內的(行內)樣式>頁面內的(崁入)樣式>外部載入(串連)
元素內的(行內)樣式
例子：
頁面內的樣式(崁入樣式)
例子：
外部載入(串連)
例子：
B.後設定>前設定
最後設定的樣式將蓋過之前設定的樣式
例子：
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
本篇是Tailwind CSS系列文章的第一篇，就用輕鬆的閒聊方式來認識一下Tailwind CSS，讓你知道它的魅力所在。Tailwind CSS是一種「Utility-First」的CSS設計模式，提供非常多預先定義好的class給開發者使用，直接加在HTML上就能直接使用，協助開發者更快的開發
不論是在基礎或是進階的版面排列，幾乎離開不了 position 系列的 CSS 語法，如果對於這些語法不熟悉，要快速完成畫面需求幾乎是不可能的，甚至會延宕整個團隊的開發速度（對，position 語法就是這麽重要）。
source code:
E
提供兩個範例，其實before, after就如同字面上的意思，會在前後加上內容。
範例1簡單的在前後加上文字，如下所示，需特別注意，是在div內的範例1前後加上文字。
before/after除了可以加上文字以外，還可以作為裝飾效果。如範例2，利用position調
css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。
如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。
E
css grid colspan sample code:
筆記一下，原本寫成overflow-y: auto，在windows chrome瀏覽器有y scroll bar，唯獨iPad沒有scroll bar，解法如下:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
本筆記參考:
1. h
對於前端初學者來說，在切版時會出現很多規則、不規則的網頁區塊，這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。
明明想要某個欄位的寬高為 200px，卻發現自己不知道為什麼怎麼更改都會改不動，又或者寬高更改了，卻沒有辦法與其他元素並列。
上述的狀況，通常都是在不熟悉 HTML display 特性而產生的狀況下才會出現⋯⋯
與HTML不同，CSS是專門修改網頁內容「樣式」的程式語言，也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容，但你可以透過HTML新增網頁內容後，再使用CSS去修改他的樣式，例如⋯⋯
有時我們會在CSS裡看到「>」、「+」、「~」這些符號的使用，它們到底有甚麼功用呢？
A.大於符號(>)
大於(>)就是選取底下直接的子元素。
以大於符號(.box > p)和空格(.box p)來做比較，先看以下例子：
使用空格的情況
.box p{ font-size:20px; color
CSS提供許多選擇器類型，當使用不同的選擇器時，套用樣式的優先權也會不同。
A.元素內的(行內)樣式>頁面內的(崁入)樣式>外部載入(串連)
元素內的(行內)樣式
例子：
頁面內的樣式(崁入樣式)
例子：
外部載入(串連)
例子：
B.後設定>前設定
最後設定的樣式將蓋過之前設定的樣式
例子：