css reset Vue中页面铺不满、字体大小不固定等解决方法

为什么需要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%;
}