CSS知识总结

huang99
87 阅读2分钟

浏览器渲染过程

  • 步骤
    • 根据HTML构建HTML树(DOM)
    • 根据CSS构建CSS树(CSSDOM)
    • 将HTML和CSS数合并成一颗渲染树(render tree)
    • layout布局(文档流,盒模型,计算大小和位置)
    • Paint 绘制(边框颜色,文字颜色,阴影等画出来)
    • Compose 合成(根据层叠关系展示画面)

image.png

更新样式

  • 一般我们会使用JS来更新样式
    • 比如 div.style.background='red'
    • 比如 div.style.display='none'
    • 比如 div.classList.add('red')
    • 比如 div.remove() 直接删除节点
  • 这几种更新样式之后浏览器的渲染方式有一些不同,可以分为三种

    • 三种渲染方式 image.png

    • 第一种,全部走一遍

      • div.remove()会触发当前元素消失,其他元素relayout(重新布局)

    • 第二种,跳过layout(布局)

      • 比如 div.style.background='red',改变背景颜色不会影响layout,直接repaint+composite

    • 第三种,跳过layout和paint

      • 改变transform,只需composite
      • 必须全屏查看效果,在iframe里有BUG

在这里查看更改属性触发什么流程:csstriggers.com/

CSS动画优化

  • JS优化
    • 使用requestAnimationFrame 代替 setTimeout或setlnterval
  • CSS优化

    • 使用will-change或translate

transform

  • 四个常用功能
    • 位移 translate
    • 缩放 scale
    • 旋转 rotate
    • 倾斜 skew
  • 一般需要配合transition 过渡
  • inline元素不支持,需要变成block
    • 位移 trans `` transform:none ```取消所有

animation

  • 使用方法
    • 声明关键帧 : @keyframes 
      @keyframes heart {
  0%{
        transform: scale(1);
}
  100%{
        transform: scale(1.2);
    }
}
    • animation
      • 语法:animation:时长|过渡方式|延迟|次数|方向|是否暂停|动画名|填充模式
        • 时长: 1s或者1000ms
        • 过渡方式: 参考transition
        • 次数: infinite(无限次)
        • 方向: reverse
        • 填充模式: none|forwards
        • 是否暂停: paused|running
        • 以上属性都有单独属性
      • 代码实例
        • animation: .5s heart infinite alternate-reverse; (.5s)代表0.5s

css总结

  • CSS元素很多,但是常用的并不多

  • CSS没有逻辑性,不要纠结于为啥子

  • CSS需要有一定的想象力

  • CSS想学好,多练才是王道

avatar
文章
阅读
粉丝