浏览器渲染

  1. 渲染过程：
    • 根据HTML构建HTML树（DOM）
    • 根据CSS构建CSS树（CSSDOM）
    • 将两棵树合并成一颗渲染树
    • Layout布局（将文档流、盒模型、计算大小和位置）
    • Paint绘制（根据边框颜色、文字颜色、阴影等绘制出来）
    • Compose合成（根据层叠关系将页面展示出来）

  2. 如何更新样式：

    1.                    ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1314543/1588237742071-2e0e2b92-85ed-427f-bd91-fe3d4e26bf0d.png#align=left&display=inline&height=369&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1007&originWidth=1527&size=198666&status=done&style=none&width=559)<br />                          ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1314543/1588237860776-f2862001-e175-4fb8-bd81-02b53e95db2d.png#align=left&display=inline&height=387&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1174&originWidth=1647&size=819509&status=done&style=none&width=543)

Transform、Transition及Animation

  1. transform（变化）

CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。(一般搭配transtion过渡使用！inline元素不支持transform，需要先变成block元素！)

  • 位移transform：translate()

    1. /*常用写法*/
    2. transform: translate(12px, 50%);
    3. transform: translateX(2em);
    4. transform: translateY(3in);
    5. transform: translateZ(100px);/*需要在父级容器上perspective:()样式，设定z轴原点在何处*/
    6. transform: translate(-50%,-50%);/*在绝对定位中，可以通过此样式水平垂直局中，需要设定left：50%。right50%*/

    image.png image.png

  • 缩放transform:scale();

    1. transform: scale(2, 0.5);
    2. transform: scaleX(2);
    3. transform: scaleY(0.5);

    image.pngimage.png

  • 旋转transform:rotate();

    1. transform: rotate(45deg);/*默认已z轴旋转，z轴为垂直屏幕的轴*/
    2. transform: rotateX(45deg);
    3. transform: rotateY(9Odeg);

  • 旋转transform:rotate();

    1. transform: skew(30deg, 20deg);
    2. transform: skewX(30deg);
    3. transform: skewY(30deg);
  1. transition（过渡）
  • 定义：过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。
  • 语法：transition：属性名+变化时长+变化方式+延迟
  • 注意！！！：display：none没法过渡到block，一般使用visibilty：hidden；==》visibilty：visible；

**

  1. animation（动画）
  • 定义：属性用来指定一组或多组动画，每组之间用逗号相隔。
  • 语法：animation：变化时长+过渡方式+延迟+方向+动画名+是否暂停+填充模式

image.png

image.pngimage.png
**