小程序开发解决margin或padding溢出问题
当设置了父元素的宽度，子元素设置宽度为100%后再在加上子元素上添加padding或margin值就会溢出。
举个例子：
//wxml
<view class="contain">
<view class="box"></view>
</view>
//wxss
.contain {
width: 100%;
padding: 30rpx;
}
.box {
width: 100%;
height: 60rpx;
background: red;
}效果：
解决方案：
加上一行代码
box-sizing: border-box指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
如以上示例的：
//wxss
.contain {
width: 100%;
padding: 30rpx;
box-sizing: border-box;
}
.box {
width: 100%;
height: 60rpx;
background: red;
}效果如下：
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-08-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读