css 杂项

 

/*css禁止文字被鼠标选中*/
.box {
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}


/*文字自动换行（主要针对英文，数字等，中文会自动换行）*/ 
.box{
    word-wrap:break-word;
}

/* 去掉页面滚动条 */
  body::-webkit-scrollbar {
    width: 0px;
  }

/* 单行文字过长以省略号代替 */
  .text-ellipsis {
    /* 省略号 */
    text-overflow: ellipsis;
    overflow: hidden;
    /* 不换行 */
    white-space: nowrap;
  }


  /* 多行文字显示三行后以省略号代替，有兼容性问题 */
  .text-3-line {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* 从上向下垂直排列子元素 */
    -webkit-box-orient: vertical;
  }

 

 实用css布局

水平居中：

1、子框：display:inline-block; 父框：text-align： center;

2、父框：display：flex；子框：margin：0 auto；

3、子框：display：table; + margin: 0 auto;

4、父框：display：flex；justify-content: center；

5、定位

 

垂直居中：

1、父框：display：table-cell；vertical-align: middle；

2、父框：display：flex；align-items: center；

3、定位

 

固比：

1、固：float：left 比：overflow：hidden；

2、固：float：left 比：margin-left：

3、父：display：flex；固：width：xxxpx 比：flex：1；