css知识总结

孓孑
95 阅读3分钟
css知识总结

css知识总结

  1. 浏览器渲染原理

    • 步骤
      • 根据HTML构建HTML树（DOM）
      根据css构建css树（CSSOM）
      将两棵树合并成一颗渲染书=树（render tree）
      Layout 布局（文档流、盒模型、计算大小和位置）
      Paint 绘制(边框颜色、文字颜色、阴影等画出来)
      Compose 合成（根据层叠关系展示画面）
      三棵树

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

    3. 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 , 具体含义要靠数学知识。
      详细可查看transition MDN

    • 不是所有属性都能过渡

      • display : none => block 没法过渡
      一般改成 visibility:hidden => visible
      display 和 visibility 的区别
      background颜色可以过渡
      opacity透明度可以过渡
      过度必须要有起始，一般只有一次动画，或者两次，比如hover和非hover的状态的过渡。

    • 实践

      • 红心

      如果除了起始还有中间点，有两种办法：

      1. 使用两次transform
        2. .a===transform===>.b
        .b===transform===>.c
        用setTimeout或者监听transition end事件，知道到了中间点
        JSBin示例
      2. 使用animation
        3. 声明关键帧
        添加动画
        JSBin示例
        如何让动画听在最后一帧：
        可加 forwards
        JSBin演示

      @keyframes 完整语法

      1. 标准写法
        2. 详细可查看 @keyframes MDN
        一种写法是from to
        另一种写法是百分数
        from to 写法 百分数写法

      animation

      1. 缩写语法
        2. animation: 动画名 | 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停
        时长：1s 或者 1000ms
        过渡方式：跟transition 取值一样，如 linear
        次数：3或者2.4或者infinite（无限）
        方向：reverse | alternate | alternate-reverse
        填充模式:none | forwards | backwards | both
        暂停：paused | running
        所有属性都有对应的单独属性
        详细可查看animation MDN
      2. 实践
        3. 红心

  3. 其他

    • position

      1. 作用

        2. 用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置

      2. 取值

        3. static 默认值，待在文档流里；
        relative 相对定位，升起来，但不脱离文档流
        absolute 绝对定位，定位基准是祖先里的static
        fixed 固定定位，定位基准是viewport (可被违反 如transform)
        sticky 粘滞定位
        详细可查看 position MDN

        position:relative


        1. 使用场景
          2. 用于做位移
          用于给absolute元素做爸爸
        2. 配合z-index
          3. z-index:auto 默认值，不创建新层叠上下文
          z-index:0/1/2
          z-index:-1/-2

        position:absolute


        1. 使用场景
          2. 脱离原来的位置另起一层，比如对话框的关闭按钮
          鼠标提示
        2. 配合z-index
        3. 注意
          4. 某些浏览器上如果不写top/left会位置错乱
          善用left:100%
          善用left:50%;加负margin

        position:fixed

        1. 使用场景
          2. 广告
          回到顶部按钮
        2. 配合z-index
        3. 注意
          4. 手机上尽量不要用这个属性，坑很多
          可搜索一下 移动端fixed 查看

    • transform

      • 四个常用功能

        • 位移 translate
        缩放 scale
        旋转 rotate
        倾斜 skew
        详细可查看 transform MDN

      • 经验

        • 一般都需要配合transition过渡
        inline 元素不支持transform，需要先变成 block

      transform 之 translate

      • 常用写法
        • translateX( length - percentage )
        translateY( length - percentage )
        translate( length - percentage , length - percentage?(可省略))
        translateZ( length )且父容器perspective
        translate3d(x,y,z)
        JSBin演示
      • 经验
        • translate(-50%,-50%)可做绝对定位元素的居中

      transform 之 scale

      • 常用写法
        • scaleX( number )
        scaleY( number )
        scale( number , number? )
        JSBin演示

      transform 之 rotate

      • 常用写法
        • rotate([ angle |zero ])
        rotateZ([ angle | zero ])
        rotateX([ angle | zero ])
        rotateY([ angle | zero ])
        rotate3d
        JSBin演示
      • 经验
        • 一般用于360度旋转制作loading

      transform 之 skew

      • 常用写法
        • skewX([ angle | zero ])
        skewY([ angle | zero ])
        skew([ angle | zero ],[ angle | zero ]?)
        JSBin示例

      transform 多重效果

      • 组合使用
        • transform:scale(0.5) translate(-100%,-100%):
        transform:none;取消所有
avatar
文章
阅读
粉丝