问题：有时候，在模拟器上UI效果显示正常，但是在android上显示的UI布局就乱了。这其中一种可能是因为父组件设置了属性

 box-sizing: border-box;子组件加起来的宽度超过了父组件的宽度，从而导致显示的效果是：父组件还是正常显示在原来设定的位置

上，而子组件则往下移动了，导致UI变乱。按照常理，当子组件的宽度大于父组件的宽度，会把父容器这个盒子给撑大，但是在微信小程序中，父容器还是原来设定的那么大，显示在原来位置，子组件则是往下移动，导致UI显示不正常。

解决方法：父组件要一起使用属性box-sizing: border-box;和overflow:hidden;注意子组件和父组件的宽度问题

.wxml代码如下：

<view class="head">    <button type="text" class="headBtn" >加密</button>    <button class="headBtn" >解密</button></view><view class="passAndEncrypt">      <input class="encryptedPass" />      <button class="encryptedTextBtn" >粘贴密文</button>   </view><textarea />

.wxss代码如下：

.head,.passAndEncrypt,textarea{  box-sizing: border-box;  display: block;  padding:0px;  margin-left:auto;  margin-right:auto;  width:89.375%;  min-width: 310px;}.head{  padding-top:20px;}.passAndEncrypt{  height:42px;}.headBtn{  display: inline-block;  width:50%;    text-align:center;  margin:0px;  padding:0px;  background-color:white;  border-radius: 0px;  border-color: white;  color: gray;  font-size:14px; }.encryptedPass{  float: left;  border:1px solid rgb(220,220,220);  border-radius: 3px;  padding-left: 4px;  margin:0px;  height: 40px;   background-color:white;  width:50%;   /* text-overflow:clip; */  overflow:hidden;  white-space:nowrap;}.encryptedTextBtn{  font-size: 14px;  float: right;  margin:0px;  width:50%;  background-color:#CC3333;  color:white;  height: 40px;   /* border-radius:0px; */  overflow:hidden; }.textarea{  border:1px solid rgb(220,220,220);  padding:6px;  line-height:20px;  margin-top:20px;  height:150px;  border-radius:3px;  background-color:white;}

从上面可以看出来：解密密码和点击解密整体下移了

原因：是因为解密密码和点击解密两个加起来的宽度超过了父元素的宽度，如上面红色字体所示，所以修改子组件的宽度并为父组件添加属性overflow,如下面所示：

.head,.passAndEncrypt,textarea{  box-sizing: border-box;  display: block;  padding:0px;  margin-left:auto;  margin-right:auto;  width:89.375%;  min-width: 310px;  overflow:hidden;}

encryptedPass{  float: left;  border:1px solid rgb(220,220,220);  border-radius: 3px;  padding-left: 4px;  margin:0px;  height: 40px;   background-color:white;  width:47%;   /* text-overflow:clip; */  overflow:hidden;  white-space:nowrap;}.encryptedTextBtn{  font-size: 14px;  float: right;  margin:0px;  width:47%;  background-color:#CC3333;  color:white;  height: 40px;   /* border-radius:0px; */  overflow:hidden; }

显示效果：

总结：在微信小程序中，模拟机和真机上效果不一样，或者UI布局混乱的原因之一是子组件的宽度（高度）超过了父组件的宽度（高度），因此在布局中一定要注意子组件和父组件的宽度问题，否则很容易导致bug；

除此之外，属性overflow:hidden一般配合box-sizing:border-box使用