這裡是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【如何做預設樣式重置？resetting 和 normalizing 之間有什麼區別？】

【修真院web 小課堂】如何做預設樣式重置？resetting 和 normalizing 之間有什麼區別？

大家好，我是IT修真院上海分院第10期的學員郭巍，一枚正直純潔善良的web程式設計師，今天給大家分享一下，修真院官網web（職業）任務13，深度思考中的知識點——如何做預設樣式重置？resetting 和 normalizing 之間有什麼區別？

（1）背景介紹：

因為在各種瀏覽器（chrome,safari,firefox,ie等主流瀏覽器）中，每個瀏覽器都有一套css樣式預設數值，而且並不是所有的瀏覽器都使用一樣的屬性值.

但當開始一個專案的時候，我們都是希望由自己來定義css的所有樣式，所以有了css 重置，以讓網頁的樣式在各瀏覽器中表現一致.

（2）知識剖析：

以p標距離，當我們沒有重置p元素的預設樣式時，p元素時預設帶有上下margin各16px的。

當我們想要在未定義p元素的外邊距時，p元素外邊距預設未0。就需要在css中重置p元素的上下外邊距為0。

（3）常見問題：

比如ul標籤的序列符號始終懸浮在li標籤之外，當li標籤內的文字居中時，無法跟隨著文字。

（4）解決方案：

因為ul的list-style預設樣式是和li標籤成分離狀的，把list-style設定為inside,就可以改變為在li標籤內。

（5）編碼實戰：

ul {

1.    padding: 0;

2.    list-style: inside;

3.    text-align: center;

}

當我們需要ul裡面的li標籤的文字居中時，需要序列符跟隨文字時。

（6）拓展思考：

當我們不對css預設樣式進行重置時，一些元素會被瀏覽器賦予預設的屬性和值，當我們不需要預設的屬性和值時，就需要進行重置。

（7）參考文獻：

css樣式重置        https://blog.csdn.net/u014516981/article/details/52141451

（8）更多討論：

Q1：為什麼需要重置樣式？

A1：因為在各種瀏覽器（chrome,safari,firefox,ie等主流瀏覽器）中，每個瀏覽器都有一套css樣式預設數值，而且並不是所有的瀏覽器都使用一樣的屬性值.

Q2：哪些元素需要重置？
A2：常見需要重置的元素有body、p、ul等，還時根據每個專案的不同，來定義不同的重置方案。

Q3：重置和不重置的區別？

A3：當我們不進行重置時，瀏覽器會賦予一些標籤預設的屬性和值，當這些屬性和值不是我們所需要的時候就需要重置成我們需要的效果

（9）鳴謝：

感謝王衡師兄，此教程是在他們之前技術分享的基礎上完善而成。

（10）結束語：

今天的分享就到這裡啦，歡迎大家點贊、轉發、留言、拍磚~

PPT連結 視訊連結

更多內容，可以加入IT交流群565734203與大家一起討論交流

這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地