vue取消用户代理样式表

原创

用砖头敲代码

发布于 2024-08-30 13:27:10

2880

文章被收录于专栏：用砖头敲代码用砖头敲代码

今天在写vue项目的时候，由于是把html的项目重写成vue项目，结果发现同样的css显示效果是不一样的。莫名其妙多出来一个8px的外边距，但是我在css中手动设置margin: 0px没有生效，经过查资料找到了解决办法。

首先还是要创建的css文件，用于清除默认样式。我是这样写的。

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, span, input, textarea {
  margin: 0;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0px;
  font-size: 14px;
  font-family: "微软雅黑", "Arial", Verdana, Arial, Helvetica, sans-serif;
  background: #fff;
  color: #333;
}

最后一步很重要，不要在 App.vue 中引用！！！！

而是要在 main.js 中引用，请在 main.js 中添加下面这段代码

// 在这里引用你的css，不要在下面，不然样式还是会被覆盖
import '@/assets/base.css'

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)
app.mount('#app')

引用后重新运行项目就会发现用户代理样式表中的 margin: 8px 已经被覆盖成了 margin: 0px