css篇

• 文字在页面中居中

width:100%;
height:1.2rem //固定高度
line-height:1.2rem

• 非固定高度在父元素中居中

.parentBox{
    width:100%;
    height:12rem//固定高度
    position:relative
}
.sonBox{
    width:100%;
    height:auto;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

• 文字单行隐藏

p{
      width: 20em;/*不允许出现半汉字截断*/
      overflow: hidden; /*自动隐藏文字*/
      text-overflow: ellipsis;/*文字隐藏后添加省略号*/
      white-space: nowrap;/*强制不换行*/
}

• 文字多行隐藏

/*只适用于移动端*/
p{
    width: 20em;
    height: 3em;/*注意高度和宽度，不允许出现半汉字截断*/
    line-height: 1.5em;//行高*行数要等于高度
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/*兼容写法*/
p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}

• x轴滑动查看

grandParentBox{
    width:100%;//给定宽度
    height:auto;
    overflow-y:hidden;
    overflow-x:auto;
}
parentBox{
    width:20rem;//给定宽度
    heigth:100%;
}
sonBox{
    Anything
}

• h5页面在iphone下滑动不流畅

#app{
          width:100%;
          height:100%;
          overflow-x: hidden;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
      }

• srcoll touch 会影响z-index值 从而导致fixed住的div块消失，最好是局部采用滚动样式