首页 > 其他分享 >vue页面图片四周出现空余的原因及解决方法

vue页面图片四周出现空余的原因及解决方法

时间:2024-04-02 18:59:45浏览次数:23  
标签:style vue 布局 padding important 空余 页面

在进行页面布局时,发现一直铺不满屏幕,此时,让我们打开网页的检查:

划到最下面,找到是由于padding:10导致的空白出现

解决方法:

进行ctrl+f搜索padding,找到style布局:

按照这个代码对我们的代码进行改造,比如我这个就去往布局界面下的style,增加

.el-main{
  padding: 0 !important;
}

加上!important可覆盖原来的样式,此时空余部分已设为0.页面可铺满

标签:style,vue,布局,padding,important,空余,页面
From: https://blog.csdn.net/m0_63577432/article/details/137125299

相关文章

  • Vue日期选择器里面进行disabledDate(time)进行调用
    题主首先参照别人的写法,写在里面,但是发现disabledDate一直是灰色调用不成功,后来进行别的参考pickerOptions:{disabledDate(time){returntime.getTime()<Date.now()-8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的},}, ......
  • vue3+ant-design-vue - 最新实现“侧边动态导航栏+面包屑导航“功能,vue3+ant后台管理
    效果图在vue3+antdesignvue后台管理系统中,详细完成菜单导航+面包屑动态联动功能效果,支持缓存功能、配置简洁、自动跟随route路由进行变化、自动匹配菜单和面包屑导航的文字等,超详细实用的示例demo全部源代码。提供详细示例源代码,新手小白直接复制稍微改下配置就能用了,快......
  • 基于SpringBoot+Vue前后端分离的宠物领养管理系统的设计与实现+15000字毕业论文
    介绍用户端:首页:播放宠物视频,展示公告列表,介绍流浪宠物。宠物领养:用户搜索想要领养宠物,申请领养,查看自己领养的宠物。流浪宠物救助:用户能够看到需要救助的流浪宠物,并能够新增新的流浪宠物信息。宠物喂养点:用户能够看到需要喂养的流浪宠物的地点,并展示出地点环境。丢失宠物......
  • vue3 点击复制
    npminstallclipboard--save//下载importClipboardfrom'clipboard'//使用页面引入js:constcopyText=async()=>{consttext=window.location.href//设置要复制的文本letclipboard=newClipboard('.buttoncopy',{text:()=>......
  • vue引入vue-router
    Vue路由(router)的安装和使用安装vue-router插件第一步:在CMD窗口中,使用命令跳转到vue的安装路径下第二步:输入命令:npmivue-router@3vue2要安装vue-router3npmivue-router@3vu3要安装vue-router4npmivue-router@4第三步:出现added1packagein2m表示安装成功vu......
  • Vue学习笔记72--element ui
    VueUI组件库:https://element.eleme.cn移动端常用UI组件库Vant:https://youzan.github.io/vantCubeUI:https://didi.github.io/cube-uiMintUI:https://mint-ui.github.ioNUTUI。。。。。。PC端常用UI组件库ElementUI:https://element.eleme.cnIViewUI:https://www.ivi......
  • Vue3集成wangeditor5
    参考连接https://www.wangeditor.com/v5/for-frame.html#使用-1效果图相关依赖<template> <div> <divstyle="border:1pxsolid#ccc;margin-top:10px"> <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig......
  • vue2 +element-ui图片上传示例
    这里使用了一个没有用的裁剪插件,需要先下载它[email protected]然后在main.js引入:importVueCropperfrom'vue-cropper'Vue.use(VueCropper)1、html部分:<template><el-formref="form":model="form"label-width="1.2rem&qu......
  • vue3+ts项目配置别名
    说明在项目开发中,需要通过配置别名来方便开发读取文件目录。配置文件vite.config.jsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{resolve}from"path";constpathSrc=resolve(__dirname,"src");exportdefault......
  • 19-Vue打包部署
    打包命令:npmrunbuild     ......