css重置样式表与normalize.css

由于css有一些默认样式，这些默认样式我们需要去除。有很多人想到可以用通配符*来解决问题，但是这样实际开发中效率非常低，因为有些标签的边距我们是不希望去掉的比如h标签、p标签等

重置样式表：专门用来对浏览器的样式进行重置的

reset.css 直接去除了浏览器的默认样式

normalize.css 对默认样式进行了统一

默认样式： -通常情况，浏览器都会为元素设置一些默认样式

-默认样式的存在会影响到页面的布局

通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面）

我分享的这个是业内比较流行的重置样式表，可以把它引入到最前面

/*

Time:2023.12.15
reset.css

*/

html, body, div, span, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

abbr, address, cite, code,

del, dfn, em, img, ins, kbd, q, samp,

small, strong, sub, sup, var,

b, i,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, figcaption, figure,

footer, header, hgroup, menu, nav, section, summary,

time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    box-sizing:border-box;
}

body {
    line-height:1;
}

:focus {
    outline: 1;
}

article,aside,canvas,details,figcaption,figure,

footer,header,hgroup,menu,nav,section,summary {
    display:block;
}

ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,

q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0; 
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
	vertical-align:middle;
}

安装使用Normalize

首先安装normalize.css:

npm i normalize.css --save-dev

遇到的问题：

import 'normalize.css'

报错：

原因没有安装：css-loader 和style-loader

npm install css-loader style-loader

就解决了。

在vue-cli中main.js中import 'normalize.css'就可以了。