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 追蹤
Hi 我是 VK~
在 8 月底寫完〈探索 AI 時代的知識革命：NotebookLM 如何顛覆學習和創作流程？〉後，有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題，剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
國泰CUBE App 整合外幣換匯、基金、證券等服務，提供簡便、低成本的美股定期定額投資解決方案。
5分鐘開戶、低投資門檻，幫助新手輕鬆進軍國際股市；提供人氣排行榜，讓投資人能夠掌握市場趨勢。
這是張老師的第三本書，我想前二本應該也有很多朋友們都有讀過，我想絕對是受益良多，而這次在書名上就直接點出，著重在從投資的角度來切入
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
這本書介紹了作者愛瑞克（愛大）對於內在原力的見解，並分享了9個設定，幫助讀者活出最好的人生版本。內容包含個人成長、成功方程式、包容力等，並提供實際案例和心得，引發讀者的動機和能量。
「 你的擔子不重，它是你的光。 」——改編聖經 The Burden Is Light
「一次就好，我想按下人生Reset鍵」……收到雜誌編輯吩咐的主題之後，困擾許久，想不出該Reset的時間點，到底在哪裡？
按下Reset鍵的那時，到底憑藉什麼樣的衝動或勇氣，現在有機會回頭瞧瞧，還當真是捏一把冷汗。但結果也還算差強人意，雖稱不上人生圓滿，至少走在夢想的航道上，也算如願。
腦子放空的時候，點開了這部開端。
這戲能讓我看下去的原因:
但其實我寫以上這些只是為了說：媽的！白敬亭帥呆了（不是指外貌上的帥），是個很有擔當的隊友。
遺憾的是：我對那個待機狀態很有興趣，不過要是解釋下去，不知道編劇能不能編呢！但顯然那又是另外一個故事了，哈哈
《開端》是由網路小說改編的都市懸疑題材電視劇，在2022年初開播就已經在網路上引發很多的討論。
长胡子老人、挂铃铛的驯鹿、魔法雪橇、一棵树、多彩灯、拐杖糖、袜子、卡片礼物堆、各类坚果、奶酪饼干、火鸡火腿大餐、热苹果汁、南瓜派。。。。这些都是圣诞节的代名词。“节"的气氛的却十分浓厚，“圣”和“诞”如果只用一位穿红衣带红帽与你一起合照的胖老人取代感觉有点牵强附会。
經過40小時的課程及測驗，我也小小地升級了！
事實證明，小金魚腦的記憶的確不只七秒！
努力了一個星期，那些認真讀的，好像有好好地進到腦裡一哩米的地方…
只是，雖然通過了考試，反而促使我想要學習更多…
透過最後的測驗，更明確地知道自己的技術不純熟，專業知識也還很不足…
如果有那麼一天需要派上用場，這
Hi 我是 VK~
在 8 月底寫完〈探索 AI 時代的知識革命：NotebookLM 如何顛覆學習和創作流程？〉後，有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題，剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
國泰CUBE App 整合外幣換匯、基金、證券等服務，提供簡便、低成本的美股定期定額投資解決方案。
5分鐘開戶、低投資門檻，幫助新手輕鬆進軍國際股市；提供人氣排行榜，讓投資人能夠掌握市場趨勢。
這是張老師的第三本書，我想前二本應該也有很多朋友們都有讀過，我想絕對是受益良多，而這次在書名上就直接點出，著重在從投資的角度來切入
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
這本書介紹了作者愛瑞克（愛大）對於內在原力的見解，並分享了9個設定，幫助讀者活出最好的人生版本。內容包含個人成長、成功方程式、包容力等，並提供實際案例和心得，引發讀者的動機和能量。
「 你的擔子不重，它是你的光。 」——改編聖經 The Burden Is Light
「一次就好，我想按下人生Reset鍵」……收到雜誌編輯吩咐的主題之後，困擾許久，想不出該Reset的時間點，到底在哪裡？
按下Reset鍵的那時，到底憑藉什麼樣的衝動或勇氣，現在有機會回頭瞧瞧，還當真是捏一把冷汗。但結果也還算差強人意，雖稱不上人生圓滿，至少走在夢想的航道上，也算如願。
腦子放空的時候，點開了這部開端。
這戲能讓我看下去的原因:
但其實我寫以上這些只是為了說：媽的！白敬亭帥呆了（不是指外貌上的帥），是個很有擔當的隊友。
遺憾的是：我對那個待機狀態很有興趣，不過要是解釋下去，不知道編劇能不能編呢！但顯然那又是另外一個故事了，哈哈
《開端》是由網路小說改編的都市懸疑題材電視劇，在2022年初開播就已經在網路上引發很多的討論。
长胡子老人、挂铃铛的驯鹿、魔法雪橇、一棵树、多彩灯、拐杖糖、袜子、卡片礼物堆、各类坚果、奶酪饼干、火鸡火腿大餐、热苹果汁、南瓜派。。。。这些都是圣诞节的代名词。“节"的气氛的却十分浓厚，“圣”和“诞”如果只用一位穿红衣带红帽与你一起合照的胖老人取代感觉有点牵强附会。
經過40小時的課程及測驗，我也小小地升級了！
事實證明，小金魚腦的記憶的確不只七秒！
努力了一個星期，那些認真讀的，好像有好好地進到腦裡一哩米的地方…
只是，雖然通過了考試，反而促使我想要學習更多…
透過最後的測驗，更明確地知道自己的技術不純熟，專業知識也還很不足…
如果有那麼一天需要派上用場，這