首页 > 其他分享 >解决vue3项目中四周留白的原因

解决vue3项目中四周留白的原因

时间:2024-03-28 13:32:36浏览次数:19  
标签:body index html 留白 vue3 四周 margin

留白原因:

vue3中body有默认属性margin:8px

body {
    display: block;
    margin: 8px;
}


如何解决:

需要在vue项目中对根目录的index.html进行代码添加

<style>
    body{
        margin: 0;
    }
</style>

index.html完整代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>


<style>
    body{
        margin: 0;
    }
</style>

标签:body,index,html,留白,vue3,四周,margin
From: https://blog.csdn.net/qq_51554230/article/details/137099542

相关文章

  • vue3 - 最新手机扫码PC网站二维码登录功能,用手机端扫描PC端vue3网页的登录二维码,然后
    效果图在vue3开发中,详细实现“PC电脑网站生成微信登录二维码+手机扫码登录+双端同步数据”,利用扫码实现网站登录功能、用户用手机扫描电脑端二维码进行登录的详细教程步骤(电脑端PC网页、手机端都是vue3开发,支持将手机端改造成微信小程序、uniapp安卓苹果app、H5网页等。)......
  • vue3背景下,el-input嵌套在弹出框中,自动聚焦“失效”?如何实现自动聚焦
    情景:在一个弹出框中,有一个el-input输入框,想要实现当弹出框出现时,input会自动聚焦。使用input的原生属性autofocus去自动获取焦点失效;使用ref获取el-input元素也显示undefined!!!<el-dialogv-model="dialogFormVisible"width="300">.......<el-input......
  • 【已解决】vue3+ts使用Element-Plus icon图标不显示|element plus 使用 icon 图标教程
    文章目录使用Element-Plusicon图标不显示的解决方案确保已正确安装和引入Element-Plus及其图标库:检查是否有命名冲突:elementplus使用icon图标教程1.安装ElementPlus2.引入ElementPlus和图标全局引入按需引入3.在组件中使用图标4.自定义图标使用E......
  • 第四周实验
    人工智能鱼比赛比赛流程:报名时间:5月末至六月末;赛前培训:九月末;初赛:11月初;决赛和获奖作品公示:12月初。比赛要求:参赛者要求:上海海洋大学在读学生,包含在校本科生、研究生等。以2-4人小组为单位报名,提倡跨学院组队。获奖作品:以2018年获奖作品为例,项目分别从基于VR和AR的海洋科......
  • Vue3.0云里雾里
    目录:一篇通识Vue3.01.OptionsAPI(选项式)和CompositionAPI(组合式)2.setupsetup语法糖 ref响应式数据 reactive只能定义对象类型的响应式数据(用情专一)toRefs解构计算属性computedwatch侦听WatchEffect标签的Ref属性组件上的ref就是获取组件实例 TS接口,泛型,自定义类......
  • 【 Vue 3】Vue3.0性能提升主要是通过哪几方面?
    1.编译阶段回顾Vue2,我们知道每个组件实例都对应一个watcher实例,它会在组件渲染的过程中把用到的数据property记录为依赖,当依赖发生改变,触发setter,则会通知watcher,从而使关联的组件重新渲染<template><divid="content"><pclass="text">节点</p>......
  • vue3路由懒加载
            路由懒加载作用:部分项目过大,首次加载耗费时间较多,路由懒加载可以让首屏组件加载速度更快一些,减少用户首次使用等待时间    路由懒加载的本质:按需引入    下面是未使用懒加载的代码:importLoginfrom'@/views/login/index.vue'constrout......
  • Vue3+TS项目,eslint安装配置
            eslint的作用主要为:可以规范团队的代码风格。在实际项目中,团队的每个成员的编码习惯都不同,这极有可能造成,一个项目多个代码风格,这会造成代码阅读困难,后期维护难度大灯问题,这就需要配置下eslint。首先我们需要先安装 @eslint/create-config 插件:pnpminstal......
  • VUE3.0(一):模板语法及指令介绍
    模板语法Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。Vue的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统。结合响应系统,在应用状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM......
  • vue3,实现如何在element plus Collapse折叠面板中,只有在点击图标时才展开
        这个的类名是tailwindcss的,主要看这里,对应上面的图片<el-collapse-itemname="1"class="relative"><template#title><divclass="w-full"><div@click="handleChangeURL"......