微信小程序使用margin控制视图位置 且参数为百分比（XXX%），出现上下位置与参数不一致问题的解决

微信小程序使用margin控制视图位置 且参数为百分比（XXX%），出现上下位置与参数不一致问题的解决

wxml代码块如下：

  <view class="yellow">       
    <view class="white">    </view> 
  </view>

wxss代码块如下：

.yellow {   
 height: 240rpx;  
 width: 100%;  
 background-color: yellow;   
 } 
 .blue{    
 height: 80%;   
 width: 45%;  
 background-color: blue;    
 /* 上右下左占比 */  
 margin: 10% 0% 10% 5%;  
 }

结果如下：

设置为：margin: 10% 0% 10% 5%；
结果并非预期蓝色块上下端分别占黄色高度的10%，但是蓝色块左边却实现了占黄色块宽度的5%。

一般来说，在css里margin的百分比是取父元素的百分比，但在这里并不成立。

解决办法

这里我们将10%根据父容器去换算出来使用即可。如下：
margin： 24rpx 0% 24rpx 0%；
效果如图：

可能大家发现还是一样，但是让我们看第一张图，是不是有一块白色浮动？这是由于margin导致的，我们只要如图添加一个overflow属性即可。不仅白条没了，也符合我们预期效果。

经验

其实margin属性参数并不适合用百分比，例如下面

我们理想情况是，蓝色占黄色高度80%，上下方空余分别占10%黄色高度，但我们能发现，使用margin属性，实际上blue视图是超过了yello视图的高度，也就是说margin中的10%实际上不会等于黄色高度的10%（24px），因此我们使用margin时最好自己进行换算。