1.html5新增操作类名方式classList
Element.classList.add('active') // 将给定的字符串值添加到列表中，如果值已经存在就不添加了
Element.classList.contains('avtive') // 列表中是否存在给定的值，如果存在返回true，否则返回false
Element.classList.remove('active') // 列表中删除给定的值
Element.classList.toggle('active') / 如果active类值已存在则删除它，否则添加它
Element.classList.replace('foo', 'bar') // 将类值foo替换成bar
Element.classList.remove('foo', 'bar')
Element.classList.add('foo','bar')
2.禁用系统菜单
-webkit-touch-callout:none; // 系统默认菜单被禁用
-webkit-user-select:none; // 禁用文本复制
-webkit-tap-hightlight-color:transparent; // 取消点击链接或者JavaScript可点击元素赋给的高亮背景色
3. steps()函数
steps(number,position)
number 为正整数，表示两帧之间的等分数
position 为动画开始的位置
position为start的时候是在等分第一小段的开头开始
position为end的时候是在等分地一小段结束的时候开始
4.css GPU加速
transform,opacity,filter CSS属性变化都会直接在GPU中处理。
因此，为了页面更加流畅，高性能的动画，我们需要尽可能的使用GPU来处理
大量使用硬件加速带来的问题：
**内存，**GPU处理过多的内容会导致内存问题，这在移动端会导致崩溃，消耗更多的电量，所以通常不会对所有的元素使用硬件加速。
**字体渲染，**在GPU渲染字体会导致抗锯齿无效（font-smoothing），因为GPU和CPU的算法不同。因此，如果不在动画结束的时候关闭硬件加速会产生字体模糊。
transform和绝对定位都会产生新的图层，所以都不存在重排，图层在GPU中transform又不会引起重绘，这就是硬件加速的原理
css 动画中 left top ----transform:translate(10px,20px) ----transfrom:translate3D(10px,20px,0)
// left top 多次重绘
// transform:translate(10px,20px) 开始和结束两次重绘
// transform:translate3D(10px,20px,0) 不会触发重绘
5.input 自动填充的背景色修改
input:-internal-autofill-selected,
input:-internal-atuofill-previewed{
transition:background-color 5000s ease-in-out 0s !important;
}
input:-webkit-autofill:focus,
input:-webkit-autofill{
box-shadow:0 0 0px 1000px white inset !important;
}
6.盒模型
每个盒子由四个部分组成content,padding,border,margin组成；
盒模型有两种：标准盒子，IE盒子
标准盒模型：box-sizing:content-box;
width与height只包括内容的宽和高，不包括，padding,border,margin
IE盒模型：box-sizing:border-box;
width与height包括内容，内边距和边框，但不包括外边距
7. flex
8.positon
-
static：默认情况下，每个元素都有一个静态位置，因此该元素将坚持正常的页面流。 -
relative：元素的原始位置与``static值一样保留在文档流中。但是现在，左/右/上/下/z-index将起作用。位置属性从该位置的原始位置“微移”元素。 -
absolute：该元素已从文档流中移除，其他元素的行为就像它不在那儿一样，而所有其他位置属性都将在该元素上工作。 -
fixed：与绝对定位的元素一样，该元素也将从文档流中删除。实际上，它们的行为几乎相同，只有固定定位的元素始终相对于文档，而不是任何特定的父元素，并且不受滚动影响。
-
sticky（实验性）：``relative视口的滚动位置达到指定的阈值之前，将元素视为值，直到该元素处于指示其fixed粘贴的位置。
-
inherit：``position值不会级联，因此可用于强制将其强制给定，以及inherit从其父级开始的定位值。
9.网格布局
- 网格容器、网格单元、网格线、网格区域、网格轨道
- 容器属性
display: grid、grid-template-columns、grid-template-rows、grid-template-columns - 分数单位
fr - 容器属性
grid-area
