微信小程序> 微信小程序篇(笔记2:图片之间缝隙)

微信小程序篇(笔记2:图片之间缝隙)

浏览量:600 时间: 来源:咩咩咩!
  • 图片下方自带留白,与下一张图片之间造成缝隙:

    期望效果是两张图之间无留白:
  • 解决代码:在该图片的.wxss里加一句display: flex;
    若图片是通过wxParse解析的,则在wxParse.wxss中找到.wxParse-img,加上display: flex;
  • 原理:盒模型不同造成的
    默认设置为标准盒模型,box-sizing:content-box,即采用标准模式解析计算,盒子的总宽度/高度=width/height+padding+border+margin;我们css里设置的宽高值只包括最中心的content。
    当设置为box-sizing:border-box时,将采用怪异模式解析计算,盒子设置的总宽度/高度,盒子总宽度/高度=width/height + margin;我们css里设置的宽高值已经包括了content+padding+border。
    display: flex;的作用就是让图片的盒模型使用怪异模式。
.wxParse-img{        /*background-color: #efefef;*/         overflow: hidden;         display: flex; }

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎