尝试解决vue网页的偏移/白边

本文讲述了作者在学习Vue时遇到的页面白边问题,通过开发者工具发现index.html中的body样式需调整为`display:block;`,以及在main.css中添加`max-width:none;`来解除最大宽度限制,从而消除白边。
摘要由CSDN通过智能技术生成

初学vue,虽然这只是个作业,不消左上的白边也能交差,但是本人的强迫症实在忍不了。
白边可能是因为我的背景图片和显示器大小比例不同。
上网查了各种方法,比如加上

* {	
	margin : 0;
	padding : 0;
}

还是没有用。
于是在网页上右键检查(开发者工具),发现了两个参数设置的问题。
一个是vue项目下的index.html,需要加上body{display: block;}虽然消不掉左边的白边,但是消掉了上面的。
下面的#app是问了AI,AI给出的方案,然而这并没有用,,,没试过删了它行不行,如果读者试过我写的方法依旧无法消除白边,可以回来这里添加#app试试。
在这里插入图片描述
另一处是项目下assets里的main.css(你让我好找!!)需要在这里添加一项max-width: none
在这里插入图片描述
在CSS中,max-width 属性用于设置元素的最大宽度。它可以防止元素的宽度超过指定的值,即使内容或容器本身可能允许更宽的宽度。max-width: none; 的意思是元素没有最大宽度限制。换句话说,它不会受到 max-width 属性的约束,元素的宽度可以尽可能宽,只要它符合其他CSS规则和容器限制。
通过开发者工具查看,这里的max-width原本是一个固定值。本人尚不知道为什么最后解除了这个最大宽度限制就消除了白边。

  • 8
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值