乐趣区

学习至今的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 时再继续滑动,元素吸顶。
  • 很有意思的属性,但兼容性很差

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

退出移动版