项目总结二

1.animation动画掉帧闪烁

(1)触发重新布局的属性有： width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。应该尽量规避使用。
(2)不会出发重新布局的属性有：transform(其中的translate, rotate, scale), color, background等。应该尽量用这些去取代。

2.低版本安卓中，绝对定位后的层级关系

html代码：

<div class="line">
      <div class="right-rate-bottom"></div>
      <div class="right-rate-up"></div>
</div>

css
如果布局要求right-rate-bottom在right-rate-up下面，需要增加z-index属性。

3.安卓4.1水平垂直居中问题

   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);

不生效，会发现上下垂直居中了，而左右不垂直居中。
左右居中margin:0 auto;
上下居中

    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);

4.div宽度足够，文字却折行

具体原因未明，将div改为span标签解决

5.ios 中，滚动区域和固定区域冲突问题

参考文章https://www.cnblogs.com/xuniannian/p/8722393.html
具体实现，与上述文章不是完全一样。

css

.vh-area {
    height: 100vh;
    width: 100%;
      .scroll-area {
        position: absolute;
        top: 0;
        bottom: 1.7rem;
        left: 0;
        right: 0;
        overflow: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        height: auto;
          &::-webkit-scrollbar {
          display: block;
          width: 5px;
     }
  }
}