CSS 知识总结
16lz
2021-06-01
一些总结
浏览器渲染原理
步骤
1.根据HTML构建HTML树(DOM)
2.根据CSS构建CSS树(CSSOM)
3.将两棵树合成一颗树(render tree)
4.layout布局(文档流,盒模型,计算大小和位置)
5.pain绘制(把颜色边框文字阴影画出来)
6.合并
与ps画画一样的方法,但主体不一样。
CSS 动画的两种做法(transition 和 animation)
animation和transition的区别在于,
animation不用JS也可以做复杂的动画,transition要配合计时器等JS.
transition和animation用法可以查mdn和菜鸟教程
transition是过渡
一个让子元素在父元素内横向纵向的居中代码
left:50%
top:50%
transform:translate(-50%, -50%);
并不是所有元素都能过度
inline元素不支持transiform要改成block
1.display:none=>block没法过度
2.一般改成visibility:hidden=>visible;
display和visibility的区别是:display: none;是彻底消失,不在文档流中占位,浏览器也不会解析该元素;不会被子元素继承。visibility:hidden;是视觉上消失了,在文档流中占位,浏览器会解析该元素;会被子元素继承
过度的时候子元素和父元素的position也有关系
relative和fixed
关于动画优化的官方文档
https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count
。
更多相关文章
- 常用的reset代码
- CSS盒模型/Box-szing功能/相对定位、绝对定位的原理和联系
- 配置vscode的cmder的方法
- Java 给 Word 添加数字签名
- 一个 当前点击元素放大的效果
- 删除数组中对应的元素
- Python中tuple和list的区别?Python基础学习!
- python 集合知识
- 01-Vue_常用指令