学习至今的css我掌握了什么

CSS 3 新特性

transform

1）概览：

常用的四大功能：位移 translate；缩放 scale；旋转 rotate；倾斜 skew。

2）translate

• 常见写法：

  • translateX（<length-percentage>）// 沿 x 方向移动一定的距离
  • translateY（<length-percentage>）// 沿 y 方向移动一定的距离
  • translate（<length-percentage>，<length-percentage>?）// 沿 x,y 方向分别移动一定距离
  • translateZ（<length-percentage>），父容器 perspective：xxxpx // 沿 z 方向移动一定的距离（在 perspective 的位置看，垂直于显示器平面）
  • translate3d(x,y,z)

• 经验：

  • 绝对居中：父元素声明 position：relative 且子元素声明 position：absolute 以后，在子元素中声明top：50% left：50% transform：translate（-50%，-50%）；

3）scale

• 常见写法：

  • scaleX(<number>) // x 方向缩放一定倍数
  • scaleY(<number>) // y 方向缩放一定倍数
  • scale(<number>,<number>?) // 整体缩放一定倍数
• 经验：使用较少，因为容易出现图片的模糊

4）rotate

• 常见写法

  • rotate([<angle>|<zero>]); // 等价于 rotateZ([<angle>|<zero>])，沿 z 轴旋转一定角度
  • rotateZ([<angle>|<zero>]); // 沿 z 轴旋转一定角度
  • rotateX([<angle>|<zero>]); // 沿 x 轴旋转一定角度
  • rotateY([<angle>|<zero>]); // 沿 y 轴旋转一定角度

• 经验：

  • 一般用于制作 360 度旋转的 loading（载入）图形
  • 现用现查 rotate 的文档即可

5)skew

• 常见写法

  • skewX([<angle>|<zero>]); //
  • skewY([<angle>|<zero>]); // 沿 z 轴旋转一定角度
  • skew([<angle>|<zero>],[<angle>|<zero>]?); // 沿 x 轴旋转一定角度
• 效果图

→→→

• 经验：

  • 用的较少
  • 用到时再搜 skew MDN 文档

6)组合使用

• transform:scale(0.5) translate(-100%, -100%);
• transform:none; // 取消所有

transition

1）语法：

• transition: 属性名 时长 过渡方式 延迟
• 可以用逗号分隔两个不同属性，例如：transition:left 1s, top 4s;
• 可以用 all 代表所有属性，例如：transition: all 1s;
• 常用过渡方式：linear | ease | ease-out | ease-in | ease-in-out

• 时间参数个数情况：

  • 0 个: 无效
  • 1 个：时长
  • 2 个：按先后顺序依次赋值给 时长 和 延迟

2）特别注意：并非所有属性都能过渡：

• display: none => display:block 无法过渡。一般改用 visibility:hidden => visibility: visible
• 背景颜色可以过渡，且是渐变
• 透明度可以过渡，opacity: 1; => opacity: 0.5;

3）过渡必须要有起始！！

animation

1)声明方式：

. 某 class{animation: 动画名 时长 过渡方式……}
@keyframes 动画名{transform: xxx();
}

2)语法

• 属性：animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名

  • 时长：1s / 1000ms
  • 过渡方式：linear / ease（同 transition 的取值）
  • 次数：3 / 2.4 / infinite（不停循环动画）
  • 方向：reverse（反向播放）/ alternate（来回播放，即正向反向正向反向，常用）
  • 填充模式：none / forwards / backwards / both
  • 是否暂停：paused / running（可用于制作停止和继续动画的按钮）

浏览器渲染过程

（一）步骤

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

（二）更新样式

• 一般我们使用 js 来更新样式

  • 方式一：JS → style → 布局 → 绘制 →合成，
    例如：div.remove
  • 方式二：JS → style → 绘制 →合成
    例如：改变背景颜色
  • 方式三：JS → style → 合成
    例如：改变 transform

（三）每个属性更新什么流程？

• 在这里可以找到你想要的！https://csstriggers.com/

about position（定位）

1.static（默认）：脱离文档流
2.relative（相对定位）：不脱离文档流，升起来

• 使用场景：

  • 作位移（很少用）
  • 给 absolute 元素做爸爸
• 配合 z -index：管理上下文层叠遮盖

3.absolute（绝对定位）：脱离文档流，升起来

• 使用场景

  • 脱离文档流，相对于 relative 爸爸定位
  • 鼠标提示：悬浮在上方，鼠标经过出现，鼠标离开消失
• 配合 z -index

• 经验：

  1. absolute 元素是相对于祖先元素中距离自身最近的元素定位的
  2. 某些浏览器不写 top，left 会位置错乱
  3. 善用 100%
  

4.fixed：固定定位，相对于视口定位

• 使用场景

  • 广告窗口
  • 回到顶部的按钮

• 配合 z -index

  • 经验：手机上尽量不要用 fixed 的，问题很多

5.sticky：从效果上看，Sticky 像是混合体，页面滑动到“临界点”之前表现为 relative, 到达“临界点”时表现为 fixed

• 使用 CSS Sticky 只需要两个条件：

  • position: sticky;
  • top: 0; // right/bottom/left 任一有效值，甚至可以为负像素值
• top：0 意思是当元素滑动到距离视口 0px 时再继续滑动，元素吸顶。
• 很有意思的属性，但兼容性很差

总结：定位元素处于层叠上下文的最上层