《CSS 知识总结》

用户1152442992085
86 阅读3分钟

新属性-position

  • position
  1. static 默认值，待在文档流里
  2. relative 相对定位，升起来，但不脱离文档流
  3. absolute 绝对定位，定位基准是祖先里的非static
  4. fixed 固定定位，定位基准是viewport（有诈）
  5. sticky 粘滞定位
  • 经验
  1. 如果你写了absolute 一般都得补一个relative
  2. 如果你写了absolute或fixed 一定要补top和left
  3. sticky 兼容性很差，主要用于面试

  • white-space:nowrap;不准自动换行

  • 某些浏览器如果不写top/left 会位置错乱

  • fixed 属性不能和transform连用，会出问题，（手机端不要用这个属性，不然会有bug）

  • background 和 opacity 区别

background 只影响元素本身

opacity 影响整个元素

层叠上下文

在本篇之前的部分——运用 z-index，（我们认识到）某些元素的渲染顺序是由其 z-index 的值影响的。这是因为这些元素具有能够使他们形成一个层叠上下文的特殊属性。

文档中的层叠上下文由满足以下任意一个条件的元素形成：

  • 文档根元素（<html>）；

  • position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；

  • position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；

  • flex (flex) 容器的子元素，且 z-index 值不为 auto；

  • grid (grid) 容器的子元素，且 z-index 值不为 auto；

  • opacity 属性值小于 1 的元素（参见 the specification for opacity）；

  • mix-blend-mode 属性值不为 normal 的元素；

  • 以下任意属性值不为 none 的元素：

  • isolation 属性值为 isolate 的元素；

  • will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；

  • contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。

  • 总结

需要记忆的有z-index /flex/opacity/transform 忘了可以搜索层叠上下文MDN

CSS动画

  • 浏览器渲染过程

步骤

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

transform(变形）

  • 原理 transform:transslateX(0 => 300px)

直接修改会被合成，需要等一会修改

transition 过渡属性可以自动脑补中间帧

  • 注意性能

并没有repaint （重新绘制） 比改left性能好

transform

transform

  • 四个常用功能
  1. 位移translate
  2. 缩放 scale
  3. 旋转 rotate
  4. 倾斜 skew

  • 一般都需要配合transition 过渡

  • iline元素不支持transform 需要先变成block

  • transform 之scale

  • 常用写法 scaleX（)

scaleY（)

scale(,?)

  • 经验 用的比较少，因为容易出现模糊

    transform 之rotate

    • 常用写法

    1. rotate([<angle>|<zero>])

    2. rotateZ([<angle>|<zero>])

    3. rotateX([<angle>|<zero>])

    4. rotateY([<angle>|<zero>]) 5.rotate3d 太复杂，无法用语言表述

    • 经验 一般用于360度旋转制作loading 用到时在搜索rotateMDN文档

  • transition过渡

  • 作用 补充中间帧

  • 语法

  1. transition:属性名 时长 过渡方式 延迟
  2. transition:left 200ms liner
  3. 可以用逗号分隔两个不同属性
  4. transition：left 200ms, top400ms
  5. 可以用all 代表所有属性 6.transition：all 200ms
  6. 过渡方式有：liner|ease|ease-in|ease-out|ease-in-out|cubic-bezier|step-start|step-end|steps,具体含义要考数学知识
  • 并不是所有属性都能过渡

  1. display:none=> block 没法过渡

  2. 一般改成visibility：hidden=> visible

animation

  • 缩写语法 animation：时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名；
    1. 时长：1s 或者1000ms
    2. 过渡方式： 跟transition取值一样，如linear
    3. 次数：3或者2.4或者infinte
    4. 方向：reverse|alternate|alternate-reberse 5.填充模式： none| forwards|backwards|both 6.是否暂停：paused|running 以上所有属性都有对应的单独属性
avatar
文章
阅读
粉丝