微信小程序兩個view之間有間隙


 

期望的是下圖

實際的是下圖

多了一條間隙

解決代碼:在該圖片的.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;的作用就是讓圖片的盒模型使用怪異模式。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM