CSS是由李爵士的挪威同事赖先生首先提出的,CSS现在已有5个版本,其中使用最广泛的是CSS2.1(IE支持)。若想查找CSS相关知识,个人更推荐MDN,css主要以练为主推荐网站365PSD
语法:样式语法
选择器{
属性名:属性值;
/*注释*/
}
css布局三种技术选择逻辑:
css定位
position 属性
- static 默认值,待在文档流里
- relative 相对定位,升起来,但不脱离文档流
- absolute绝对定位,定位基准是祖先元素里的非 static,最近的定位元素 fixed 固定定位,定位基准是 viewport 视口
- sticky粘滞定位,在移动端存在太多bug
div分层图解
css动画
一:浏览器渲染过程
- 步骤
- 根据 HTML 构建 HTML 树(DOM)
- 根据 CSS 构建 CSS 树(CSSOM)
- 将两棵树合并成一颗渲染树(render tree)
- Layout 布局(文档流、盒模型、计算大小和位置)
- 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