一些实用的技巧

一、盒子垂直水平居中

4种方法

1、定位 盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;
2、table-cell布局 父级 display: table-cell; vertical-align: middle; 子级 margin: 0 auto;
3、定位 + transform ; 适用于 子盒子 宽高不定时； （这里是本人常用方法）

  position: relative / absolute;
    /*top和left偏移各为50%*/
       top: 50%;
       left: 50%;
    /*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
    transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 （至于何是3D加速 请看浏览器进程与线程篇）

4、flex 布局
父级：
/flex 布局/
display: flex;
/实现垂直居中/
align-items: center;
/实现水平居中/
justify-content: center;

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

二、改变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;
}

三、css实现单行文本溢出显示 ...

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
当然还需要加宽度width属来兼容部分浏览。

四、实现多行文本溢出显示...

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

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
注：
1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2、display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

五、最快捷的数组求最大值

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

六、更短的数组去重写法

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