常用的css样式

• 设置 好看的界面样式

    box-sizing: content-box;
    border-radius: 10px;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);

• 去除input 点击默认框

outline: none;
box-shadow: none;
border: none;

超出省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行超出省略号

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

• nth-child()

odd   单行
even  双行

input:-internal-autofill-selected {
    /*只有谷歌兼容 字体颜色*/
    -webkit-text-fill-color: #fff !important;
}

input:-webkit-autofill {
    /* 去除选中后默认显示白色  */
    -webkit-box-shadow: 0 0 0px 1000px #2b3443 inset !important;
}

一些较偏的css样式属性

• will-change
  • 作用：告知浏览器该元素会有哪些变化的方法，在该元素真正发生变化前，提前做好优化准备工作
  • 缺点：
    1. 不能将 will-change 应用到过多元素上，会造成页面响应缓慢，消耗更多的资源。
    2. 有节制的使用。 当元素恢复到初始状态的时候，浏览器会丢掉之前做的优化工作，使用了 will-change 的元素，表明该元素会经常发生变化，浏览器会保存更长时间的优化工作。最好的方法是在元素变化之前和变化之后，通过脚本来修改will-change 的值。
    3. 不要过早的应用will-change 优化。 如果你的页面性能很好，就没有必要使用will-change 榨取一丁点速度。作为最后优化的手段，用来解决现有的性能问题，不能作为预防性能问题。过渡的使用会造成大量内存的占用，导致更复杂的渲染过程，因为浏览器会试图准备可能存在的变化过程。
    4. 给他足够的工作时间。使用时需要尝试去找到一些方法提前一定时间获知元素可能发生的变化，然后为它加上 will-change 属性。