如何做默认样式重置？resetting 和 normalizing 之间有什么区别？

这里是修真院前端小课堂，每篇分享文从

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

【如何做默认样式重置？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 {

padding: 0;

list-style: inside;

text-align: center;

}

当我们需要ul里面的li标签的文字居中时，需要序列符跟随文字时。

（6）拓展思考：

当我们不对css默认样式进行重置时，一些元素会被浏览器赋予默认的属性和值，当我们不需要默认的属性和值时，就需要进行重置。

（7）参考文献：

css样式重置 https://blog.youkuaiyun.com/u014516981/article/details/52141451

（8）更多讨论：

Q1：为什么需要重置样式？

A1：因为在各种浏览器（chrome,safari,firefox,ie等主流浏览器）中，每个浏览器都有一套css样式默认数值，而且并不是所有的浏览器都使用一样的属性值.

Q2：哪些元素需要重置？
A2：常见需要重置的元素有body、p、ul等，还时根据每个项目的不同，来定义不同的重置方案。

Q3：重置和不重置的区别？

A3：当我们不进行重置时，浏览器会赋予一些标签默认的属性和值，当这些属性和值不是我们所需要的时候就需要重置成我们需要的效果

（9）鸣谢：

感谢王衡师兄，此教程是在他们之前技术分享的基础上完善而成。

（10）结束语：

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~