Mr.Zhou

CSS 中的单位

# CSS 中的单位

绝对单位：cm， mm， Q，in ，px
相对单位：em， rem， vw ，vh ， px 与 em 的区别 px 是相对于屏幕分辨率而言的一个绝对单位，同一设备下他们的物理长度不变，但是不同设备下的长度意义不同。

em 是相对长度单位，具体大小要根据父元素来计算。

# 盒子居中

transform vertical-align margin display position

# 隐藏元素

  • 完全隐藏 display：none，hidden 标签属性
  • 视觉隐藏 visibility：hidden
  • 语义隐藏 aira-hidden:true

# 定位

absolute 会将 盒子变为 block -- 针对行内元素 position 的值 有哪些？

  • static --》 正常定位
  • relative --》相对定位 相对当前位置进行定位
  • absolute --》绝对定位，以距离自己最近的定位元素进行定位
  • fixed --》固定于视口进行定位
  • sticky --》粘性定位

# sticky 粘性定位

position ：sticky 可以设置 left\top\right\bottom 4个阈值，表示如果小于阈值的话则保持当前阈值距离。

# BFC

# 介绍BFC及其应用

BFC，指的是一个独立的布局环境，BFC内部的元素布局与外部互不影响。 触发BFC 的方式很多，常见的有：

  • 设置浮动
  • overflow 设置为 auto、scroll、hidden
  • position 设置为 absolute、fixed 常见的BFC应用有：
  • 解决浮动元素令父元素丢失高度问题。
  • 解决非浮动元素被浮动元素覆盖问题
  • 解决外边距垂直方向重合的问题。

# 介绍下 BFC、IFC、GFC 和 FFC

  • BFC 块级格式化上下文
  • IFC 行内格式化上下文
  • GFC 网格布局格式化上下文
  • FFC 弹性格式化上下文

# CSS 属性计算

# 计算过程

  • 确定生命值：参考样式表中没有冲突的声明，作为 CSS 属性值
  • 层叠冲突： 对样式表有冲突的声明使用层叠规则，确定 CSS 属性值
  • 使用继承： 对仍然没有值的属性，若可以继承则继承父元素的值
  • 使用默认值： 对仍然没有值的属性，全部使用默认属性值

# 简述一下 CSS 中的层叠规则

CSS 中当属性值发生冲突时，通过层叠规则来计算出最终的属性值，层叠规则可以分为3块：

  • 重要性（Importance）：！important
  • 专用型（Specificity）：指根据权重计算
  • 源代码次序（Souce order）：后面的会覆盖前面的

CSS 引入方式有：

  • 外联 通过 link 标签
  • 内联 在head 内 使用 style 标签
  • 嵌入 在元素内 通过 style 属性

link 与 @import 区别：

  1. link 属于 HTML 标签， 而 @import 完全是 CSS 提供的一种方式。
  2. 加载顺序不同 只有当使用了 @import 的 css 文件下载完成并解析后，浏览器才知道还存在其他的 CSS 文件需要下载
  3. 兼容性 已完全兼容
  4. 当使用JS 控制 DOOM 去改变样式的时候，只能使用link 标签，因为@import不是DOM 可以控制的。 使用@import 会引起并行文件下载错乱。

# transition

transition 并不是所有都能过度，只有存在中点值的才能进行过度 document 提供 ontransitionend 事件来监听元素过度结束

# animation

提供了多个状态的监听事件

  • animationstart CSS 动画开始后触发
  • animationiteration CSS 动画重复播放触发
  • animationend CSS 动画完成后触发

# 简述 CSS3 中新增的变形如何使用

分为 2D 和 3D

  • 具有 x/y 的函数：translateX、天然水拉特Y、scaleX、scaleY、skewX、skewY
  • 2D变形函数： translate、scale、rotate、skew、matrix
  • 3D变形函数：rotateX、Y，rotate3d、translateZ、translate3d、scaleZ、scale3d

还有一些其他的变形属性：

  • transform
  • transform-origin
  • transform-style
  • perspective
  • perspective-origin
  • backface-visibility

# 文字

word-wrap word-break white-space

# 什么是渐进式渲染

也被称为惰性渲染，指为了提高用户感知的加载速度，以尽快的速度来呈现页面的技术。

  • 骨架屏
  • 图片懒加载
  • 图片占位符
  • 资源拆分

# CSS 渲染性能优化

  • 尽量使用id选择器 id唯一
  • 避免深层次的选择器嵌套
  • 尽量避免使用属性选择器，匹配速度慢
  • 使用渐进增强的方案
  • 遵守CSSLint 规则
  • 不要使用@import
  • 避免过分重排
  • 依赖继承
  • 值缩写
  • 避免好性能的属性
  • 背景图优化合并
  • 文件压缩

# Reflow 和 Repaint

reflow 是指文档的布局或结构发生改变时，重新计算和更新文档中各个元素的位置和大小。

repaint 是指当应用程序需要更新屏幕上某个区域时，由程序员手动触发的重绘操作。

# 减少 reflow 和 repaint

以下是一些可以减少 reflow 和 repaint 的方法：

  1. 避免在 document 上直接进行频繁的 DOM 操作，如果确实需要可以采用 off-document 的方式进行。
  2. 将 DOM 离线后修改，例如先把 DOM 给 display:none，然后你想怎么改就怎么改。
  3. 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量，不然这会导致大量地读写这个结点的属性。
  4. 尽可能的修改层级比较低的 DOM。
  5. 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
  6. 千万不要使用 table 布局，因为可能很小的一个小改动会造成整个 table 的重新布局。
  7. 不要一项一项的修改样式，尽量一次性写完。
  8. 当大量读写操作无法避免时，可以使用文档碎片documentFragment来解决。
  9. 使用 fixed 和 absolute 能够有效减少回流

# Fixed 和 Absolute 能够减少回流的原因

fixed 和 absolute 可以减少回流的原因是，它们的位置是相对于文档的，而不是相对于文档中的其他元素。因此，当使用 fixed 或 absolute 定位时，如果文档中的其他元素的位置或大小发生更改，它们的位置不会受到影响，因此不需要进行回流。

相比之下，如果使用相对定位（relative）或默认的 static 定位，当文档中的其他元素发生位置或大小的更改时，它们的位置也会随之更改，因此需要进行回流。回流会导致性能问题，因为它们会导致屏幕刷新的次数增加，从而影响应用程序的性能。

因此，使用 fixed 或 absolute 定位可以减少回流，从而提高应用程序的性能。

【Selector】