问题：有时候，在模拟器上UI效果显示正常，但是在android上显示的UI布局就乱了。这其中一种可能是因为父组件设置了属性box-sizing:border-box;子组件加起来的宽度超过了父组件的宽度，从而导致显示的效果是：父组件还是正常显示在原来设定的位置上，而子组件则往下移动了，导致UI变乱。按照常理，当子组件的宽度大于父组件的宽度，会把父容器这个盒子给撑大，但是在微信小程序中，父容器还是原来设定的那么大，显示在原来位置，子组件则是往下移动，导致UI显示不正常。

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

.wxml代码如下：

    加密    解密            粘贴密文   </code></pre><p data-anchor-id="lq5f">.wxss代码如下：</p><pre data-anchor-id="bi76"><code>.head,.passAndEncrypt,textarea{</code><code>  box-sizing: border-box;</code><code>  display: block;</code><code>  padding:0px;</code><code>  margin-left:auto;</code><code>  margin-right:auto;</code><code>  width:89.375%;</code><code>  min-width: 310px;</code><code>}</code><code>.head{</code><code>  padding-top:20px;</code><code>}</code><code>.passAndEncrypt{</code><code>  height:42px;</code><code>}</code><code>.headBtn{</code><code>  display: inline-block;</code><code>  width:50%;  </code><code>  text-align:center;</code><code>  margin:0px;</code><code>  padding:0px;</code><code>  background-color:white;</code><code>  border-radius: 0px;</code><code>  border-color: white;</code><code>  color: gray;</code><code>  font-size:14px; </code><code>}</code><code></code><code></code><code>.encryptedPass{</code><code>  float: left;</code><code>  border:1px solid rgb(220,220,220); </article>
          <section class="newsDetailCur f-cb">
            <ul>
				<!--上一篇-->
     	  <li class="l"> 上一篇 : <a href="/Doc/633.html" title="微信小程序swiper滑动页面实践-类似于安卓ViewPa">微信小程序swiper滑动页面实践-类似于安卓ViewPa</a></li>
  	 			<!--下一篇-->
     	  <li class="r">下一篇 : <a href="/Doc/635.html" title="微信小程序布局之行内元素和块级元素">微信小程序布局之行内元素和块级元素</a></li>
  	             </ul>
          </section>
        </article>
      </div>
    </div>
  </div>
</section>
<!-- footer -->
<footer class="footer">
  <div class="wrap footer_info">
    <div class="row f-cb">
      <div class="span-2 smal-hide">
        <div class="flogo"><img src="/skin/web/img/logo_f.jpg" alt=""></div>
      </div>
      <div class="span-2 smal-12 smal-hide">
        <div class="fnav"> 
        <span class="ftit"><a href="/Solution/">解决方案</a></span>
        <a href="" rel="nofollow">餐饮</a><a href="" rel="nofollow">商城</a><a href="" rel="nofollow">新零售</a><a href="" rel="nofollow">同城</a><a href="" rel="nofollow">预约到店</a><a href="" rel="nofollow">教育培训</a><a href="" rel="nofollow">企业展示</a>        </div>
      </div>
      <div class="span-2 smal-12 smal-hide">
        <div class="fnav"> 
         <span class="ftit"><a href="/Doc/">知识分享</a></span> 
          <a href="/Ask/">常见问题</a><br>
          <a href="/Com/">公司动态</a><br>
          <a href="/Sem/">SEM知识</a><br>
          <a href="/HTML5/">HTML5</a>        </div>
      </div>
      <div class="span-4 smal-12">
        <div class="fcon"> <span class="ftit smal-hide">联系我们</span>
          <p> 联系人：崔经理<br>
            地址：北京市顺义区南法信府前街16号 炫立方<br>
            手机：18910140161<br>
            <span>QQ：369864189</span>
			  <span>微信：semdashi</span>
			  <span>邮箱：1687105521#qq.com(#替换@)</span> </p>
        </div>
      </div>
      <div class="span-2 smal-12">
        <div class="fewm"><img src="/uploads/allimg/20191217/1-19121G02041543.png" alt="二维码"></div>
      </div>
    </div>
  </div>
  <div class="fcoy wrap">
    <p>
        <span>Copyright © 2002-2017 北京顺晟科技发展有限公司 版权所有 <script type="text/javascript" src="https://js.users.51.la/19881029.js"></script></span>
        <span><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备17043394号</a></span>
        <span><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011302005634" rel="nofollow" target="_blank">京公网安备 11011302005634号</a></span>
    </p>
  </div>
</footer>
<script type="text/javascript" src="https://c.ibangkf.com/i/c-f773_77131.js"></script>
<script type="text/javascript" src="https://js.users.51.la/19881029.js"></script>
<!-- plugs call -->
<div class="plugin-fixed-call smal-hide">
  <div class="fixedTop" style="background: rgb(203, 203, 203);"><p>TOP</p><img class="fixedTopPointer" src="/skin/widgets/plugin-fixed-call/pointer.png"></div>
  <a href="tencent://message/?uin=369864189&Site=www.shunchengkj.com&Menu=yes" target="_blank" rel="nofollow">
    <div class="child fixedQQ" id="fixedQQ"><img src="/skin/widgets/plugin-fixed-call/QQ.png"><p>QQ客服</p></div>
  </a>
  <a href="javascript:;" onclick=""><div class="child fixedCall"><img src="/skin/widgets/plugin-fixed-call/call.png"><p>18910140161</p></div></a>
  <div class="fixedCode">
    <img src="/skin/widgets/plugin-fixed-call/code.png">
    <div class="fixedCodeInfo">
      <img class="fixedPointer" src="/skin/widgets/plugin-fixed-call/leftPointer.png">
      <img class="fixedQr" src="/uploads/allimg/20191217/1-19121G02041543.png"> <!-- 二维码从后台调取 -->
    </div>
  </div>
</div>

<!--includes javascript at the bottom so the page loads faster--> 
<script src="/skin/seajs/sea.js" id="seajs-browser"></script> 
<script src="/skin/seajs/seajs.config.js"></script> 
<script>
  seajs.use('app/index.js')
</script>
</body>
</html>