场景
真机预览发现页面不固定，最后找到原因是container-item1设置宽100%后再设置padding导致控件宽度超过了屏幕宽度（很奇怪），从而导致整体页面可以左右拖动。
.note-container{
width: 100%;
height: 36px;
background-color: rgba(255, 0, 0, 0.801);
padding: 5px 10px 5px 8px;
}
原因分析
view组件的宽、高默认不包含margin。即：
如果不设置box-sizing: border-box;，view的宽高等于 ：设置的宽度 +2padding+2border。高度同理；
设置了box-sizing: border-box;view的大小宽高，则是包含padding和边框在内的。
解决方案
增加css配置：box-sizing: border-box;具体如下：
.note-container{
width: 750rpx;
height: 36px;
background-color: rgba(255, 0, 0, 0.801);
padding: 5px 10px 5px 8px;
box-sizing: border-box
}
网友评论