关于Vue项目中的div自带margin-top的问题

最新推荐文章于 2024-04-09 15:07:57 发布

周二六

最新推荐文章于 2024-04-09 15:07:57 发布

阅读量1.1k

点赞数

分类专栏： vue前端开发 css样式文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_43012085/article/details/125672903

版权

vue前端开发同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css样式

1 篇文章 0 订阅

订阅专栏

本人作为初学者，写博客只是为了巩固自己的所学记录错误

项目场景：

vue版本2.9.6

div顶部有自带的间隔（magrin或padding）

问题描述

在index.html中添加对body的样式并不能去除自带的间隔（magrin或padding）

在查阅大佬们的解决方法后，自己实践后发现了这个问题

(1条消息) vue去除浏览器自带padding、margin_零月§连芯@的博客-CSDN博客https://blog.csdn.net/qq_43531886/article/details/108713135

(1条消息) 解决：vue组件顶部留有空白问题_JavaStudyha的博客-CSDN博客_vue 顶部空白https://blog.csdn.net/a23352321/article/details/107556555

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>pb</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <style>
     body{
      margin: 0;
      padding: 0;
     }
    *{
      margin: 0;
      padding: 0;
     }
  </style>
</html>

vue文件

<!--  -->
<template>
<div class=''>
<div class="zNav"></div>
<div class="ttt"></div>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
*{
  margin: 0;
  padding: 0;
}
body{
    margin: 0;
    padding: 0;
    background: #000;
}
.zNav{
    background: #ffffff;
    height: 60px;
    /* margin-top: -4.5%; */
    border: 1px solid blue;
}
.ttt{
    height: 30px;
    border: 1px solid rgb(236, 87, 0);
}
</style>

实际出现的效果：对body的样式未生效，仍有间隔

原因分析：

app.vue中有自带的样式

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  //就是这一行
   margin-top: 60px;
}
</style>