CSS的坑

1.垂直居中的坑

wxml：

<g-form-item disabled='{{disabled}}'>
  <view class='number-container'>
    <view class='number-container__lable inline-sytle'>{{lable}}</view>
    <view class='number-container__numb-box inline-sytle'>
      <view class="sign-sytle inline-sytle {{。。?'':'exrange-sytle'}}" bindtap='。。'>
        -
      </view>
      <view class='count-sytleinline-sytle'>{{count}}</view>
      <view class="sign-sytle inline-sytle {{。。'exrange-sytle':''}}" bindtap='。。'>
        +
      </view>
    </view>
  </view>
  <view wx:if='{{describe.length>0}}' class='number-descBox'>{{describe}}</view>
</g-form-item>

关键在b框，怎么上下对齐。如果把count-sytle 设为overflow:hidden，它就不跟旁边两个水平，这时候处理方式：sign-sytle集体overflow，同时要记得消除inline-block之间的缝隙。即：把number-container__numb-box：font-size:0，子元素都要设置font-size，这时候number-container__numb-box是由子元素们撑高的。但是这个会受position的影响，如果父级position:relative，这时候不用设置font-size:0，count-sytle和sign-sytle都设置vertical-align: top即可。