CSS知识总结

195

一.浏览器渲染原理 1.根据HTML构建HTML树(DOM)

image.png

2.根据CSS构建CSS树(CSSOM)

image.png

3.将两个树合并成一颗渲染树(render tree)

image.png

4.Layout布局(文档流·盒模型·计算大小和位置)

5.paint(把边框颜色·文字颜色·阴影等画出来)

6.Compose合成(根据层叠关系展示画面)

这是1-3的树; image.png

如何更新样式?

1.一般我们用js来更新样式 div.style.background='red'

div.style.display='none'

div.classList.add('add')

div.remove()直接删除掉

2.以上方法有什么不同呢?

有三种不同的渲染方式

image.png

image.png

transform(变形)

有四个常用功能 1.translate

transition:translateX( ):左右位移

transition:translateY( ):上下位移

transition:translateZ( ):离视点远一些或者近一些。

2.scale

transition:scaleX( ):体型变胖

transition:scaleY( ):体型变高 注意这里border也会变粗

3.rotate

transition:rotateX( ):沿着横轴方向转动

transition:rotateY( ):顺时针转动

transition:rotateZ( ):默认垂直屏幕的轴转动;

4.skew

transition:skewX( ):左右倾斜

transition:skewY( ):上下倾斜

二.css动画的两种做法

transition(过渡)

animation

transition过渡代码示例

js.jirengu.com/zuwaseseva/…

animation 代码示例

js.jirengu.com/gasocusiha/…