CSS知识总结

CSS是由李爵士的挪威同事赖先生首先提出的，CSS现在已有5个版本，其中使用最广泛的是CSS2.1(IE支持)。若想查找CSS相关知识，个人更推荐MDN，css主要以练为主推荐网站365PSD

 语法：样式语法
  选择器{
        属性名:属性值;
        /*注释*/
    }

css布局三种技术选择逻辑：
css定位

position 属性

• static 默认值，待在文档流里
• relative 相对定位，升起来，但不脱离文档流
• absolute绝对定位，定位基准是祖先元素里的非 static，最近的定位元素 fixed 固定定位，定位基准是 viewport 视口
• sticky粘滞定位，在移动端存在太多bug

div分层图解

css动画

一：浏览器渲染过程

• 步骤

1. 根据 HTML 构建 HTML 树(DOM)
2. 根据 CSS 构建 CSS 树(CSSOM)
3. 将两棵树合并成一颗渲染树(render tree)
4. Layout 布局(文档流、盒模型、计算大小和位置)
5. Paint 绘制(把边框颜色、文字颜色、阴影等画出来) Compose 合成(根据层叠关系展示画面)

二：三种更新方式

三种更新方式分别对应的使用场景：
第1种改了样式；
第2种不需要再布局了，因为没改样式；（例如只改了background ）
第3种transform只需要合成；
备注：不确定更改样式时属性会触发什么流程可参考
CSS Trigger

三：CSS动画的两种做法（transition & animation）

transition 过渡

常态
语法：
transition: 属性名 时长 过渡方式 延迟
transition: left 200ms linear
transition: left 200ms, top 400ms 可以用逗号分隔两个不同的属性
transition: all 200ms 可以用 all 代表所有属性
过渡方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps
作用：补充中间帧
变态
过渡：把看见到看不见的这个过程，展现出来
display:none=>block会直接不见且消失，中间没有过度
opacity透明度可以过度但不推荐。调背景透明度opacity:1;到opacity:0;但是透明度有个bug，opacity只是让它看不见，占位子还是可以点击的。可用setTimeout来remove位置
visibility:visible;改为visibility:hidden只会在最后消失不见，像opacity样依然占着位子
背景色也能过度；

animation

缩写语法：
animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名;
时长：1s 或 1000ms
过渡方式：跟 transition 取值一样
次数：3 或者 2.4 或者 infinite
方向：reverse | alternate | alternate-reverse
填充模式：none | forwards |backwards | both
是否暂停：paused | running
以上所有属性都有对应的单独属性

@keyframes 的2种语法
1.from to

@keyframes xxx{
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(100%);
    }
}

2.是百分数

@keyframes xxx{
    0%{
        transform: none;
    }
    66.66%{
        transform: translateX(200px);
    }
    100%{
        transform: translateX(200px) translateY(100px);
    }
}

代码示例：

CSS 动画优化

js / css / 样式 / 布局 / 绘制 / 合成 5个过程每一个都可以被优化
1.优化js:

• 对于动画效果的实现，避免使用 setTimeout 或 setInterval，请使用 requestAnimationFrame。
• 将长时间运行的 JavaScript 从主线程移到 Web Worker。
• 使用微任务来执行对多个帧的 DOM 更改。
• 使用 Chrome DevTools 的 Timeline 和 JavaScript 分析器来评估 JavaScript 的影响。

2.优化计算范围：style

• 降低选择器的复杂性；使用以类为中心的方法，例如 BEM。
• 减少必须计算其样式的元素数量。

3.优化布局：layout

• 布局的作用范围一般为整个文档。
• DOM 元素的数量将影响性能；应尽可能避免触发布局。
• 评估布局模型的性能；新版 Flexbox 一般比旧版 Flexbox 或基于浮动的布局模型更快。
• 避免强制同步布局和布局抖动；先读取样式值，然后进行样式更改。

4.优化绘制：paint

• 除 transform 或 opacity 属性之外，更改任何属性始终都会触发绘制。
• 绘制通常是像素管道中开销最大的部分；应尽可能避免绘制。
• 通过层的提升和动画的编排来减少绘制区域。
• 使用 Chrome DevTools 绘制分析器来评估绘制的复杂性和开销；应尽可能降低复杂性并减少开销。

5.优化合成：composite

• 坚持使用 transform 和 opacity 属性更改来实现动画。
• 使用 will-change 或 translateZ 提升移动的元素。
• 避免过度使用提升规则；各层都需要内存和管理开销。 JS 优化。使用 requestAnimationFrame 代替 setTimeout 或 setInterval CSS 优化。使用 will-chage 或 translate