vue项目body中自带margin: 8px 如何取消

最新推荐文章于 2024-05-22 19:00:00 发布
最新推荐文章于 2024-05-22 19:00:00 发布
阅读量3.2k 收藏 8
点赞数 8
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rng2uzi/article/details/121615881
版权

话不多说先上图
在这里插入图片描述

莫名其妙的我当前的代码设置了* {
margin: 0;
padding: 0;
list-style: none;
}
但是可以看到body中依旧有这个问题，等于说设置了没有用
在这里插入图片描述
没办法我去public/index中直接全局设置了，发现body的默认消失了
在这里插入图片描述
在这里插入图片描述
完美解决。在这里插入图片描述

界大宝
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
electron + vue项目实现打印小票功能及实现代码
10-17
在电子（Electron）+ Vue 项目中实现打印小票功能，主要涉及到Electron的API使用和Vue组件的配合。以下是对实现这一功能的详细解释： 1. **需求分析**： - 公司项目中可能需要通过Electron应用程序调用用户的系统...
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
10-16
在Vue项目中，有时我们需要实现消息的横向滚动效果，特别是在实时更新信息的场景下，例如一个组件周期性地轮询获取消息，然后传递给另一个组件显示。然而，在实际操作过程中，可能会遇到一个问题：消息滚动的速度...
vue-去除页面自带的margin空白
weixin_46479909的博客
12-05 686
在项目列表中找到index.html文件（vue2项目的在public文件夹中），添加如下代码。
vue3中body有默认属性margin:8px如何去掉?
light的博客~~~
06-20 4497
解决问题
【Vue2入门技能树】：Vue2项目从入门到放弃所遇到的问题汇总
最新发布
qq_44864879的博客
05-22 360
②在 src 目录下新建 router 文件夹，然后在 router 文件夹下新建 index.js ，在 index.js 中写入如下代码。③在 src 目录下新建 store 文件夹，然后在 store 文件夹下新建 index.js ，在 index.js 中写入如下代码。解决办法：在 public 目录下的 index.html 中加入如下样式即可。①在项目所在文件夹下打开 cmd 终端，然后运行如下代码，等待安装。④在组件中使用（一般是 App.vue）④在 main.js 中加入如下代码。
vue 默认margin:8px
AinUser的博客
05-21 5248
# 问题情景 之前新拉取的vue项目，今天在更换背景图片的时候，发现，图片与顶部有缝隙，查看后 发现，body属性中有margin:8px的属性，但是我程序代码中，外层并没有相关设置， 且该body是在我页面程序代码的外层 # 问题解决 随后，想起可能vue脚手架，默认设置的 # 解决实现 1. 找到vue脚手架中index.html页面 2. 在下面添加如下代码 <!-- 解决vue脚手架默认margin:8px问题 --> <style> body { marg.
vue3中body有默认属性margin:8px去掉
SiYuHuang_SCDN的博客
04-09 428
最近刚开始上手vue3,发现body中有个margin:8px；在app等页面去不掉。在index.html中添加样式代码，可以去掉项目自带的margin。现发现在index.html中可以去掉。
Vue3 body默认属性margin：8px如何去掉
m0_59006402的博客
05-11 1212
src目录下 找到 index.html 在style 里面加上。在写vue3项目的时候，写完页面 有一圈margin。F12 发现 body 有一个 margin：8px。
去除vue自带的边距
qq_66061193的博客
03-29 1881
新建一个vue项目的时候，都会自带一个外边距，如何消除外边距呢？首先找到public下的index.html。插入以下代码，就可以消除边距啦~
vue中tab选项卡的实现思路
12-11
Vue.js 是一款流行的前端JavaScript框架，用于构建用户界面。在Vue中实现选项卡（Tab）功能是一项常见的任务，尤其在创建复杂Web应用时...在实际项目中，可以进一步封装成自定义组件，以提高代码的可重用性和可维护性。
vue脚手架中配置Sass的方法
11-30
Vue脚手架中配置Sass主要是为了让项目能够利用Sass的强大功能来编写更高效、可维护的CSS样式。Sass是一种CSS预处理器，它扩展了CSS语法，提供了变量、嵌套规则、混合（mixin）、函数等高级特性，极大地提高了CSS的可...
vue2实现的落日余晖登录页+滑块校验
05-16
用vue2实现的一个登录页demo， 背景图可直接替换，成品...一定要注意body标签，这个标签默认是有 margin:8px 导致后续页面可能有白边，所以要注意处理一下，后续会有对应的文章进行详细的介绍，欢迎看我主页进行查找。
【Vue】vue3创建组件时，自带margin：8px。
jiede8624的博客
12-29 897
浏览器为了优化用户的体验，确保组件之间的间距看起来更加整洁和一致，所以自带了“margin：8px”这个属性。在项目最外层目录的的index.html中，在<head>标签中加入以下代码即可。这里index.html中的属性会优先与浏览器的默认属性，所以就解决了。
body有8px的神秘边距
weixin_43923808的博客
07-06 494
首先，你需要知道为什么会有的神秘边距： 很多元素默认有一个的 ，而且在不同浏览器上表现效果不同在项目中，通常都是使用重置所有的样式表，可以保证在所有浏览器下，项目展示的样式是一致的： （1）在项目中应用：在的中插入文件， （2）或者在demo这样写：...
vue的边距怎么设置_Vue项目，最近在做一个网站项目，遇到一个body页面布局四周留白的问题，以下是解决方法：...
weixin_39664995的博客
12-18 2144
最近在做一个网站项目，遇到一个body页面布局四周留白的问题，以下是解决方法：1、需求负责人在查看效果时，发现body页面布局的四周留有空白，认为影响美观，让其去掉四周留白。2、项目环境项目中使用的是 vue + vue cli + element ui 搭建3、解决过程3.1 这是页面渲染出来的效果，四周有明显的留白，并且图片两侧的留白有两层；image.png3.2 打开F12控制台后，发现...
【vue】vue构建主页面时，发现有8px的自带margin
weixin_40264447的博客
11-16 278
vue构建主页面时，发现有8px的自带margin，想要去掉这个margin，可以在对外层重写div
[css] body的默认margin值
weixin_36210698的博客
03-22 4865
body的默认margin值 一般浏览器中都对body标签进行默认的margin设置为8px，当然，不同的浏览器会设置成不同的值，它是由浏览器的user-agent-stylesheet提供了，chrome提供的如下： body { display: block; margin: 8px; } 有些浏览器的user-agent-stylesheet可以由用户进行修改，而有的浏览器...
Vue 去除自带的外边距：8px；
蓝斑.json的博客
12-08 1024
看↑图就可以搞定了如果报错： webpack < 5 用于默认包含 NODE.js 核心模块的 polyfill ;解决方案如下↓
vue项目中大屏设置1920:1080分辨率的自适应界面样式；在小屏幕中可按16:9的比例进行缩小
06-09
针对你的问题，可以考虑使用CSS3中的媒体查询（Media Query）和Viewport单位来实现自适应界面。具体实现步骤如下： 1. 在项目中引入Viewport单位。在HTML文档中的head标签中加入以下代码： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 2. 在CSS样式表中使用媒体查询来设置不同分辨率下的样式。例如： ```css /* 默认样式 */ body { font-size: 16px; } /* 适应分辨率1920x1080 */ @media screen and (min-width: 1920px) and (min-height: 1080px) { body { font-size: 20px; /* 其他样式 */ } } /* 适应16:9比例的小屏幕 */ @media screen and (max-aspect-ratio: 16/9) { body { font-size: 14px; /* 其他样式 */ } } ``` 在以上代码中，我们使用了两个媒体查询：一个用来适应分辨率为1920x1080的大屏幕，另一个用来适应16:9比例的小屏幕。在这些媒体查询中，我们可以设置不同的样式来适应不同的屏幕大小和分辨率。 3. 在Vue组件中使用Viewport单位。例如： ```vue <template> <div class="container"> <div class="content"> <!-- 内容 --> </div> </div> </template> <style scoped> .container { width: 100vw; /* 使用Viewport单位设置宽度 */ height: 100vh; /* 使用Viewport单位设置高度 */ } .content { width: 80%; /* 使用百分比设置宽度 */ margin: 0 auto; /* 使用margin实现水平居中 */ } </style> ``` 在以上代码中，我们使用了Viewport单位来设置容器的宽度和高度，这样容器就可以自适应不同的屏幕大小。同时，我们也使用了百分比来设置内容区域的宽度，这样可以让内容在容器中居中显示。 综上所述，使用Viewport单位和媒体查询可以很好地实现Vue项目中的自适应界面。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值