css篇

作者: hey_前端豆 | 来源:发表于2017-06-08 16:07 被阅读0次
    • 文字在页面中居中
    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块消失,最好是局部采用滚动样式

    相关文章

      网友评论

          本文标题:css篇

          本文链接:https://www.haomeiwen.com/subject/nmhtqxtx.html