为什么需要css reset
HTML标签在浏览器中都有默认的样式,不同的浏览器的默认样式之间存在差别。例如ul默认带有缩进样式,在IE下,它的缩进是由margin实现的,而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。
CSS代码(style.css)
html,
body {
width: 100%;
height: 100%;
position: relative;
}
body {
line-height: 1.42857143;
font-size: 14px;
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial,
sans-serif, Microsoft YaHei;
}
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:focus {
outline: 0 !important;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
cursor: pointer;
}
a:hover,
a:focus {
text-decoration: none;
}
img {
max-width: 100%;
}