一些實用的技巧

1、盒子垂直水平居中

4種方法

一、定位 盒子寬高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半寬度; margin-top: -自身一半高度;
二、table-cell佈局 父級 display: table-cell; vertical-align: middle; 子級 margin: 0 auto;
三、定位 + transform ; 適用於 子盒子 寬高不定時； （這裏是本人經常使用方法）

position: relative / absolute;
    /*top和left偏移各爲50%*/
       top: 50%;
       left: 50%;
    /*translate(-50%,-50%) 偏移自身的寬和高的-50%*/
    transform: translate(-50%, -50%); 注意這裏啓動了3D硬件加速哦 會增長耗電量的 （至於何是3D加速 請看瀏覽器進程與線程篇）

四、flex 佈局
父級：
/flex 佈局/
display: flex;
/實現垂直居中/
align-items: center;
/實現水平居中/
justify-content: center;

再加一種水平方向上居中 ：margin-left : 50% ; transform: translateX(-50%);

2、改變placeholder的字體顏色大小

只限於pc,手機不支持

input::-webkit-input-placeholder { 
    /* WebKit browsers */ 
    font-size:14px;
    color: #333;
} 
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */ 
    font-size:14px;
    color: #333;
} 
input:-ms-input-placeholder { 
    /* Internet Explorer 10+ */ 
    font-size:14px;
    color: #333;
}

3、css實現單行文本溢出顯示 ...

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
固然還須要加寬度width屬來兼容部分瀏覽。

4、實現多行文本溢出顯示...

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

因使用了WebKit的CSS擴展屬性，該方法適用於WebKit瀏覽器及移動端；
注：
一、-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 爲了實現該效果，它須要組合其餘的WebKit屬性。常見結合屬性：
二、display: -webkit-box; 必須結合的屬性 ，將對象做爲彈性伸縮盒子模型顯示 。
三、-webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。

5、最快捷的數組求最大值

var arr = [ 1,5,1,7,5,9];
    Math.max(...arr)  // 9

6、更短的數組去重寫法

[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
    
    // [2, "12", 12, 1, 6, 13]