CSS样式工具类

1.字体超出框处理

     -> 父元素
        text-overflow:ellipsis;
        overflow: hidden;
        white-space: nowrap;

2.各类居中

    ->已知子元素宽高

      父元素 position:relative;
      子元素 position:absolute;
            left:50%;
            margin-left:-1/2子盒子宽;
            top:50%;
            margin-top:-1/2子盒子高;


    ->Flex弹性盒子：用flex实现垂直居中

      父元素 display:flex; 
            align-items:center; 
      子元素 display:flex;
            align-items:center;
            justify-content:center; 
            flex-direction:column;

3.左右适配布局

.left{
     width: 100px;
     height: 100px;
     float: left;
     background-color: red;
     }
.right{
     overflow: hidden;
     height:100%;
      }

4.大于号美化

consola字体

5.伪类三角形

content: "";
position: absolute;
top: 3.3rem;
left: 50%;
margin-left: -0.8rem;
width: 0rem;
height: 0rem;
border: .8rem solid transparent;
border-top-color: #46cd71;

6.清除input在ios的默认样式

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    -webkit-appearance: none;

7.流动边框

.apiBtn{
    width: 160px;
    height: 36px;
    line-height: 1.8rem;
    background-color: #00baf7;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    border-radius: 1px;
    cursor: pointer;
    position: relative;
    z-index: 3;
}
.apiBtn::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    border: 2px solid #00baf7;
    margin: -10px;
    z-index: -1;
    -webkit-animation: lineA 8s linear infinite;
    -o-animation: lineA 8s linear infinite;
    animation: lineA 8s linear infinite;
}
.apiBtn::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    border: 2px solid #00baf7;
    margin: -10px;
    z-index: -1;
    -webkit-animation: lineB 8s linear infinite;
    -o-animation: lineB 8s linear infinite;
    animation: lineB 8s linear infinite;
}

@keyframes lineA{
    0%,100%{clip:rect(0,180px,2px,0)}
    25%{clip:rect(0,2px,56px,0)}
    50%{clip:rect(54px,180px,56px,0)}
    75%{clip:rect(0,180px,56px,178px)}
}
@keyframes lineB{
    0%,100%{clip:rect(54px,180px,56px,0)}
    25%{clip:rect(0,180px,56px,178px)}
    50%{clip:rect(0,180px,2px,0)}
    75%{clip:rect(0,2px,56px,0)}
}

8.页面字体不可选择

-moz-user-select: none;
-khtml-user-select: none;
user-select: none;