19.【已解决】小程序 外层view设置宽100%后再设置pad

场景

真机预览发现页面不固定，最后找到原因是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
}