CSS 知识总结

tylyf
346 阅读3分钟

1. 浏览器渲染原理

步骤：

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

用js更新样式的一般方法

  • 比如div.style.background = 'red'
  • 比如div.style.display = 'none'
  • 比如div.classList.add('red')
  • 比如div.remove(直接删掉节点

以上方法的异同：

先看三种解析方式

01.png

  • 第一种全部流程的

    • div.remove() 会触发当前消失，其他元素relayout

  • 第二种跳过 layout布局

    • 改变背景颜色这种，直接repaint + composite

  • 第三种，跳过layout和paint

    • 改变transform，只需composite
    • 注意必须全屏查看效果,在iframe里看有问题

2. CSS 动画的两种做法（transition 和 animation）

transform完整介绍

四个常用功能

  • 位移 translate

    • translateX()

    • translateY()

    • translate( ,? ) ?代表可以省略

    • translateZ()且父容器 perspective（试点或景深）

    • translate3d(x, y, z)

      • 绝对居中的完美答案

                        top:50%;
                        left:50%;
                        transform:translate(-50%,-50%);
                     // 父元素必须设置了定位

  • 缩放 scale 用的较少 因为容易模糊

    • scaleX( )
    • scaleY( )
    • scale( , ? )

  • 旋转 rotate

    • rotate( [ |])
    • rotateZ([ | ])
    • rotateX([ | ])
    • rotateY([ | ])
    • rotate3D 太复杂，详细请查资料

  • 倾斜 skew

    • skewX([|])
    • skewY([ ])
    • skew( [ ],[|]?)

  • 组合使用

    • transform: scale(0.5) translate(-100%,-100%);
    • transform: none;取消所有
经验：
  • 一般都需要配合 transition 过渡
  • inline 元素不支持 transform ，需要先变成 block

transition过渡动画

作用：

  • 补充中间帧

语法：

  • transition:属性名 时长 过渡方式 延迟
  • transition: left 200ms linear
  • 可以用逗号分隔两个不同属性
  • transition: left 200ms, top 400ms
  • 可以用all 代表所有属性
  • transition: all 200ms
  • 过渡方式有:linear ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps，具体含义要靠数学知识 developer.mozilla.org/zh-CN/docs/…

注意：不是所有属性都能过渡

  • display: none => block没法过渡
  • 一般改成visibility: hidden => visible
  • display和 visibility的区别自己搜一下
  • background颜色也可以过度

animation动画


@keyframes 动画名称{
 0%{       //起始和结束状态缺少时,会以元素默认的状态为起始和结束状态

 }
 ...中间可以定义无限关键帧    也可以写成  from   to 形式
 100%{

 }
}
关键帧不写属性即为默认值
动画要与相应的元素结合才能触发效果
​
animation-name:动画名称;
animation-duration:动画时长;
animation-timing-function:动画速度曲线;有如下几个
 1.ease
 2.ease-in
 3.ease-in-out
 4.ease-out
 5.steps()    步数，可以做动态图
 6.贝塞尔曲线
 7.linear 匀速
animation-delay:动画延迟时间   默认为零
 1.n(指定时间)s
animation-iteration-count: 动画播放次数 
 1.infinite无限播放次数
 2.n(指定次数)
animation-direction:规定动画是否在下一周期逆向播放   默认值normal:每次都正向播放   altermate:奇数次正向播,偶数次反向播 
 1.reverse:每次都反向 
 2.alternate-reverse:奇数次反向播,偶数次正向播
animation-fill-mode:起始位置 
 1.默认值backwards(回到最初状态)
 2.forwards:保留最后一帧
animation-play-state:动画的运行/暂停 
 1.默认running 
 2.paused:暂停
综合样式：
animation:动画名称   动画时间  动画的速度曲线  动画延迟   播放次数  方向   暂停开始   起始位置        //写在相应的元素上面</pre>
avatar
文章
阅读
粉丝