CSS知识总结

塘主阿兜
659 阅读4分钟

1.浏览器的渲染原理

1.步骤

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

2.如何更新样式？

一般使用JS来更新样式

三种更新的方式：

  1. JS / CSS > 样式 > 布局 > 绘制 > 合成

如果您修改元素的“layout”属性，也就是改变了元素的几何属性（例如宽度、高度、左侧或顶部位置等），那么浏览器将必须检查所有其他元素，然后“自动重排”页面。任何受影响的部分都需要重新绘制，而且最终绘制的元素需进行合成。

例如：div.remove()会触发当前消失，其它元素relayout。

  1. JS / CSS > 样式 > 绘制 > 合成

如果您修改“paint only”属性（例如背景图片、文字颜色或阴影等），即不会影响页面布局的属性，则浏览器会跳过布局，但仍将执行绘制。

例如：改变背景颜色，直接repaint+composite。

  1. JS / CSS > 样式 > 合成

如果您更改一个既不要布局也不要绘制的属性，则浏览器将跳到只执行合成。 这个最后的版本开销最小，最适合于应用生命周期中的高压力点，例如动画或滚动。

例如：改变transform，只需composite。

  1. 补充：CSS优化看Google文章
  • JS优化：使用requestAnimationFrame代替setTimeout或setInterval
  • CSS优化：使用will-change或transform

2.CSS动画的两种做法

使用transform(详见文档)

四个常用的功能：

  • 位移 translate
  • 缩放 scale
  • 旋转 rotate
  • 倾斜 skew

  1. translate

     translateX(<length-percentage>) //可写长度，可写百分度，在x轴上
 translateY(<length-percentage>) //在y轴上
 translate(<length-percentage>,<length-percentage>?) //?表省略
 translateZ(<length>) //且父容器perspective,在z轴上
 translate3d(x,y,z)

可以做绝对定位元素的水平垂直居中（子绝父相）

{
 left:50%;
 top:50%;
 transform:translate(-50%,-50%)
}

  1. scale

    CSS属性 scale 允许你可以分别且独立地指定CSS属性 transform 缩放的比例。

    /* 关键值 */
scale: none;
/* 单个值 */
/* 设定比1大的数值使该元素变大 */
scale: 2;
/* 设定比1小的数值使该元素缩小 */
scale: 0.5;
/* 两个值 */
scale: 2 0.5;
/* 三个值 */
scale: 2 0.5 2;

    取值：

    单一数值

    单一的数值即指定了一个缩放系数，同时作用于X轴和Y轴让该元素进行缩放，相当于指定了单个值的scale()(2D缩放)函数。

    两个长度/百分比值

    两个数值即分别指定了2D比例的X轴和Y轴的缩放系数，相当于指定了两个值的scale()（2D缩放）函数。

    三个长度/百分比值

    三个数值即分别指定了3D比例的X轴、Y轴和Z轴的缩放系数. 相当于一个scale3d()函数。

    none

    指定不进行缩放。

、

  1. rotate

    /* Keyword values */
scale: none;

/* Angle value */
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;

/* x, y, or z axis name plus angle */
rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;

/* Vector plus angle value */
scale: 1 1 1 90deg;

    rotate(360deg)默认以垂直于屏幕的轴转动的

  2. skew（用的少，看文档）

一般可以和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 (具体看文档)

不是所有的属性都可以过渡，display：none => block没法过渡。

过渡必须有起始

使用animation（详见MDN文档）

使用animation的步骤：

  1. 添加关键帧
  2. 添加动画
@keyframes xxx {
   0% { transform:none;}
   60% { transform:translateX(200px)}
   100% { transform:translate(200px,300px)}
}

@keyframes完整语法是有两种：

  • 一种是 from to
  • 另一种是%百分数

缩写语法： animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名

  • 时长：1s或1000ms
  • 过渡方式：跟transition取值一样。如linear
  • 次数：3或2.4或indfinite(无限次)
  • 方向：reverse | alternate | alternate-reverse
  • 填充模式：none | forward （停留在最后一帧）| backwards | both
  • 是否暂停：paused | running #id.style.animationPlayState = 'paused/running'

以上的所有的属性都有对应的单独属性

3.CSS的定位

position的五个取值：（重要）

  • static 默认值，待在文档流
  • relative 相对定位，升起来，但是不脱离文档流，是相对自己定位
  • absolute 绝对定位。定位基准是祖先里第一个非static的元素
  • fixed 固定定位，以视口为基准的定位，实际上并不是绝对的

  • sticky 粘滞定位，兼容性不好。

小总结：

  1. 若是写了absolute，一般会补一个relative
  2. 若是写了absolute或fixed，一定要写top和left
  3. sticky 目前兼容性很差，不适合项目生产。
avatar
文章
阅读
粉丝