微信小程序 cover-image padding margin失效的问题

最新推荐文章于 2021-12-21 12:25:23 发布
最新推荐文章于 2021-12-21 12:25:23 发布
阅读量510 收藏
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37666587/article/details/105489295
版权

最近用到了cover-view标签，因为页面中有input，所以用这个标签来压住input，但是遇到一个问题，cover-view中的cover-image设置了margin。padding在编辑器中预览都没问题，但是到了真机上都不生效

后面把文字用cover-view包裹了一下，给他设置了margin得到自己想要的结构

网上查不到原因，有大神指导的可以解释下

代码前后对比

效果图

张大臀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SSD主控芯片CP测试你真的知道么？
weixin_43291481的博客
11-27 6776
在芯片测试领域，主要分为两部分测试，业界通俗的叫法是CP和FT，我们今天主要谈谈CP的问题。什么是CP测试？CP是（ChipProbe）是缩写，指的是芯片在foundry流片回来后，需要在wafer level 进行简单的DC和功能测试，主要是通过探针卡的探针扎到芯片PAD上，然后通过ATE输入激励信号，测试芯片的输出响应。CP测试的工具如下： 装在Loadboard后，ATE的测试头翻转如上图...
微信小程序padding失效
小鱼尔呀
01-16 3042
如果设置padding失效，在代码中添加box-sizing:border-box;
img标签 使用 margin : 0 auto 无效
god_wen的博客
12-24 6164
因为img 是内联元素，想要使用mmargin : 0 auto 前必须转换为块元素img{display:block}
微信小程序cover-view的padding样式不起作用
qq_40012232的博客
03-19 1066
微信小程序cover-view样式 padding在有些苹果手机上不起作用，给他设置height属性来解决
番外篇-关于微信小程序使用cover-image无法滚动的问题
lovelixue的博客
06-30 1059
<cover-image></cover-image> 当你的scroll-view里面的item子控件使用上面这个的时候，你会发现在预览框可以滚动，跑到手机就无法滚动了，这是微信自带bug，你可以将这个用image控件替换
image标签使用margin属性时使用具体数值则有效而使用auto则无效，对其使用padding属性不会撑开盒子
zmf19901117的博客
05-06 754
image标签使用margin属性时使用具体数值则有效而使用auto则无效，对其使用padding属性不会撑开盒子。如下面的代码和效果图： 1.使用margin: auto ,无法使input水平居中，但是我们看margin-top这个具体的数值是起作用了。 给input添加display: block; 就可以了，具体原因我也不太清楚，请大佬解释一下，谢谢。 ...
小程序textarea穿透、不跟随页面滚动解决方案
weixin_39527281的博客
03-21 3787
一、textarea穿透 由于textarea是原生组件，层级是最高的，页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上 这时可以选择列表自定义组件，使用 cover-view 和 cover-image 组件代替view和image，cover-view 和 cover-image 组件，可以覆盖在部分原生组件上面。 或...
负margin问题
qq_43338177的博客
03-31 157
在个人中心，UI一般会设计这样的样式头像突出来的，当然直接用定位也可以，我这里用的是magin,但是直接用margin设置为负值，父级也会跟着上移，达不到想要的效果，方法是给父级的上边框设置padding或者border就可以了。 ...
小程序安卓手机图片正常显示，ios不显示
_小郑有点困了的博客
02-24 1543
小程序安卓手机图片正常显示，ios不显示 博客搜到说什么webp格式之类的结果，实际上是cover-image不支持base64格式，因为部分图片是import进去的，所以都换回src
img标签是什么元素？为何margin: 0 auto；对img标签失效？（含解决方法）
unlilalila的博客
12-21 5458
首先，img 标签是块元素、行内元素还是行内块元素？ 可以肯定的说，img 标签确实是一个行内元素（不是我定义的，自己查官方文档） 但是也许有人好奇为啥 img 作为一个行内元素又可以设置宽高？ 因为它不仅是一个行内元素，还是一个可替换元素（不是我定义的，自己查官方文档） 可替换元素： 浏览器根据元素的标签和属性，来决定元素的具体显示内容 就像文档中说的一样，img 标签就是一个可以设置宽高的行内元素，所以它就像行内块元素一样 接下来再来分析一下 marg...
小程序cover-view 标签 字被截掉的坑
柠檬酸
03-06 1186
小程序中用到map组件时只能用cover-view标签覆盖在地图上，但是会有一个问题，字会被截掉一部分，加marging、padding都不好使 解决办法 设置一个字体 font-family:-apple-system; 就可以了 或者 在两边加个空标签占位置 .kong{display:inline-block;width:10rpx;line-height:25rpx;} ...
margin失效情形解析
ylleve的博客
02-11 4757
margin属性在以下情况下会失效 display计算值为inline的垂直margin无效 <p style="margin-top: 40px;display: inline;">content</p> 表格中的tr和td元素或者display计算值为table-cell或table-row的元素 margin 合并的时候，更改 margin 值可能是没有效果的。以...
微信小程序 解决view包裹image时view有内边距
且听真言
02-02 3467
把view的宽高和image的宽高设置相同。
微信小程序开发 踩坑日志之一： image设置宽高无效？
csdn317341539的博客
10-14 4002
.icon{ width: 190rpx; height: 190rpx; margin-top: 60rpx; margin-bottom: 30rpx; } <image src="/images/icon/big-done.png" class="icon"/> css样式中我给图片设置了宽高，但无论怎么设置图片都还是一样那么小。在进行各种更改尝试之后。。...
微信小程序 image float right后右边的边距没有了
且听真言
02-02 3382
其实并不是图片或者image标签的原因，还是padding导致的，所以在修改padding后，width的值还是要修改的，否则会出问题的。   &lt;scroll-view class="feedback_scroll_scro" style="height:{{scrollHeight}}rpx" scroll-y="true" bindscrolltoupper="upper" bind...
微信小程序常见bug汇总
CherryCola_zjl的博客
04-13 4507
ios 底部margin无效 底部加一个view height为1 或者为 margin 值 ios textarea 有默认padding值，水平不好对齐 var phone = wx.getSystemInfoSync(); //调用方法获取机型 if (phone.platform == 'ios') { this.setData({iosTextarea:true}) ...
微信小程序のCss（一）
weixin_30325487的博客
01-19 286
一.margin：外边距；设置对象四边的外延边距。 margin: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。 margin：20rpx：如果只提供一个，将用于全部的四边。 margin：20rpx 20rpx：如果提供两个，第一个用于上、下，第二个用于左、右。 margin：20rpx 20rpx 10rp...
微信小程序样式padding理解
热门推荐
u012329294的专栏
03-25 1万+
原来做网站业务时，没有重视过前端开发，认为那是美工的事情，现在要自己开发微信小程序了，发现如果自己不懂，那将是一件非常懊恼的事情。看来欠下的东西迟早要还的。下面将最简单的padding样式拿出来总结一下。padding 就是内边距，就是说控制上下左右的边距，让界面感觉没有那么拥挤。这个意思都明白，但实战是却遇到padding有时候带1个参数、有时间带2个参数、有时间带4个参数。按照我一贯偷懒的想法...
微信小程序background-image
最新发布
07-28
微信小程序中的background-image属性可以用来设置元素的背景图片。根据引用\[1\]，直接在.wxss文件中使用background-image:url()可以加载网络图片或base64图片作为背景图片，但不能加载本地图片。如果需要加载本地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值