vue项目中样式重置

最新推荐文章于 2023-10-26 13:35:18 发布

行行皆辛苦

最新推荐文章于 2023-10-26 13:35:18 发布

阅读量521

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/dream_will_true/article/details/130147699

版权

由于html的默认样式，例如body的边距，h1-h6的标签的字体大小等等，和我们希望的初始样式有不小的差距，所以我们基本每个项目都需要做项目重置，以下是重置样式的css文件

/******* 样式重置  ********/
body,html {
    font-size:14px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-family: Roboto, Roboto-Medium;
    margin: 0;
    padding: 0;
    height: 100%;
    background: #fff;
}

body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
    margin: 0;
    padding: 0;
    outline: none;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 14px;
    font-weight: normal;
}

table {
    font-size: inherit;
}

input, select {
    font-size: 100%;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
}

button {
    text-align: center;
    border: none;
    cursor: pointer;
    background: transparent;
}

i {
    font-style: inherit;
}

th, em, strong, b, address, cite {
    font-style: normal;
    font-weight: normal;
}

li {
    list-style: none;
}

img, fieldset {
    width: 100%;
    height: 100%;
    display: block;
    border: 0 none;
}

ins {
    text-decoration: none;
}

a {
    color: #1b3155
}

然后再main.js中引入就好了

import Vue from 'vue'
import App from './App.vue'
import '@/assets/css/reset.css'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')