我们在给浏览器添加元素时,经常会遇到一些浏览器默认的,我们不想让其存在的情况,这时只需要去除浏览器默认样式即可:
1、最左边最上边的一点间隙:这时浏览器自动为body设置了外边距造成,只需要:
<style>
body {
margin: 0px;
}
</style>
2、p元素上下间距
<style>
p{
margin: 0px;
}
</style>
3、列表 ul 等的左边空白,以及项目符号:
<style>
ul{
padding: 0px;
margin:0px;
list-style:none;
}
</style>
注:list-style也可以设置其他的项目符号,但项目符号在padding种,需要给padding一些宽度
4、我们注意到大多数默认样式来自于margin与padding种,所以懒得一个个来可以通配
<style>
*{
padding: 0px;
margin:0px;
}
</style>
但这种方式并不能保证解决所有默认样式,这时便可引入去除默认样式的css:reset.css全部去除,normalize.css对默认样式进行统一,解决兼容问题。用一个就好
reset.css代码地址:https://meyerweb.com/eric/tools/css/reset/index.html
normalize.css代码地址:https://necolas.github.io/normalize.css/latest/normalize.css
or https://github.com/kristerkari/normalize.scss/blob/master/_normalize.scss