Reset CSS 與 Normalize.css
閱讀時間約 3 分鐘
每個HTML元素都會有預設的CSS設定，但由於各家瀏覽器預設值沒有統一，就可能導致同樣的程式碼在不同瀏覽器呈現結果不同，比如在Chrome排版看起來正常，但到Safari看起來卻跑版了。因此，Reset CSS與Normalize.css都是為了解決上述問題衍生出來的方法。
Reset CSS
Reset CSS的原理是把樣式重置，比如把html/body/p/h1~h6的margin, padding, border都歸0，因為預設樣式都不見了，就需要針對每個標籤重新設定，在使用上比較沒彈性，因此就衍生出Normalize.css的解法。
- 如下圖，是Eric A. Meyer大師寫的Reset CSS片段截圖:
Normalize.css
normalize.css 的原理是保留有價值的預設值，當一個HTML元素在各個瀏覽器的css預設值不同時，normalize.css會盡可能的針對不同瀏覽器進行微調。
由於預設樣式還在，因此在使用上比較方便，就不須將使用到的每個元素都重新設定樣式了。另外，每個樣式調整都有清楚的註解，是為了解決什麼問題才會有這段。
- normalize.css片段截圖:
normalize.css除了保留預設樣式與微調解決不一致問題以外，還修正了瀏覽器的bug，亦提供了CDN的引用方式，因此被許多知名的framework使用，比如bootstrap即是使用normalize.css來做CSS Reset。
Vue.js使用Normalize.css
- 在App.vue中的style內import:
@import "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css";
- 在App.vue中的style通常不會設scoped，因此css會影響全局。
本筆記參考:
- https://www.796t.com/article.php?id=91417
- http://www.flycan.com/article/css/reset-css-562.html
- https://andy6804tw.github.io/2021/05/23/css-reset/
- https://israynotarray.com/css/20210807/3641451940/
- https://rollerblade.tw/css-reset-css-normalize/
- https://www.796t.com/p/640744.html
- https://ithelp.ithome.com.tw/articles/10196528
- https://stackoverflow.com/questions/51314997/how-to-add-cdn-css-file-to-vue-cli-3-project
- https://necolas.github.io/normalize.css/
- https://meyerweb.com/eric/tools/css/reset/
為什麼會看到廣告
21會員
161內容數
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這篇文章分享了 CSS Battle 第 38 題的解法，並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
這篇文章將介紹如何透過CSS Battle的題目來練習基礎切版技巧。透過一個眼睛圖案的例子，提供了對於 border、outline、border-radius等屬性的調整方式，並分享了一種 100% 的解法。歡迎大家分享自己的作法與作者交流，一起學習成長。
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
什麼是 CSS 預處理器
CSS 預處理器是一種工具，使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇，它們通常會提供一些純 CSS 中沒有的功能，例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護，並提高開發效率。
為什麼使用 CSS 預處
這是一篇關於CSS Battle系列的文章，介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
本篇文章分享了 CSS Battle 的題目 #160 的解法，並講解了對於前端工程師基礎切版的重要性和技術總結。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這篇文章分享了 CSS Battle 第 38 題的解法，並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
這篇文章將介紹如何透過CSS Battle的題目來練習基礎切版技巧。透過一個眼睛圖案的例子，提供了對於 border、outline、border-radius等屬性的調整方式，並分享了一種 100% 的解法。歡迎大家分享自己的作法與作者交流，一起學習成長。
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
什麼是 CSS 預處理器
CSS 預處理器是一種工具，使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇，它們通常會提供一些純 CSS 中沒有的功能，例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護，並提高開發效率。
為什麼使用 CSS 預處
這是一篇關於CSS Battle系列的文章，介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
本篇文章分享了 CSS Battle 的題目 #160 的解法，並講解了對於前端工程師基礎切版的重要性和技術總結。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。