# CSS 单位总结

# 经典真题

• px 和 em 的区别？

px 即 pixel 像素，是相对于屏幕分辨率而言的，是一个绝对单位，但是具有一定的相对性。因为在同一设备上每个设备像素所代表的物理长度是固定不变的 (绝对性)，但在不同设备间每个设备像素所代表的物理长度是可以变化的 (相对性)。
em 是相对长度单位，具体的大小要相对于父元素来计算，例如父元素的字体大小为 40px，那么子元素 1em 就代表字体大小和父元素一样为 40px，0.5em 就代表字体大小为父元素的一半即 20px。

# CSS 中有哪些单位

CSS 中的单位有两大类，分别为绝对长度单位和相对长度单位。

# 绝对长度单位

生活中常见的长度单位有米（m）、厘米（cm）、毫米（mm），每种单位的长度都是固定的。如：5cm 到哪里都是 5cm。

*{

    width: 5cm;

    height: 5cm;

}

这就是相对长度单位，这个不常用。

# 相对长度单位

相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，
我们可以使文本或其他元素的大小与页面上的其他内容相对应。

最有用的单位如下：

1. em 在字体大小样式上通常是相对于父元素的字体大小，其他样式中是相对于自身字体大小。
2. ex 相对于字符 "x" 的高度
3. ch 相对于字符 "0" 的宽度
4. rem 相对于根元素的字体大小，使用于响应式，根据不同尺寸调整根元素的字体大小。
5. lh 相对于元素的的 line-height
6. vw 相对于视窗宽度的 1%
7. vh 相对于视窗高度的 1%
8. vmin 视窗较小尺寸的 1%
9. vmax 视窗大尺寸的 1%

# 居中方式总结

# 经典真题

• 怎么让一个 div 水平垂直居中

1. 通过 verticle-align: middle 实现垂直居中
2. 通过父元素设置伪元素:before，然后设置子元素 verticle-align:middle 实现垂直居中
3. 通过绝对定位实现垂直居中
4. 通过 transform 实现垂直居中
5. 使用弹性盒子居中

# 水平方向居中

1. 通过 margin 设置: margin: 0 auto 或者 margin-left 和 margin-right 都设置成 auto
2. 通过流式布局 flex: display: flex; justify-content: center;

# 垂直方向居中

1. 通过 verticak-align: middle; display: inlink-block
2. 通过伪元素 before ，设置 verticak-align: middle; display: inlink-block; height: 100%;
3. 通过绝对定位 position: absolut; left: 50%; top: 50%; 并在 top 和 left 上减去盒子的一半宽度，和一般高度。
4. 流式布局 display:flex; align-times: center;

# 隐藏元素方式总结

# 经典真题

• 隐藏页面中的某个元素的方法有哪些？

隐藏元素可分为三大类型：

1. 完全隐藏：元素从渲染树中消失，不占据空间。
   完全隐藏的方式有：设置 display:none、为元素设置 hidden
2. 视觉上的隐藏：屏幕中不可见，占据空间。
   属性视觉上隐藏的方式有：设置 opacity 属性为 0、绝对定位的 eft 和 top 值设置为 - 999px、设置 margin-left 值为 - 999px、设置宽高为 0、裁剪元素。
3. 语义上的隐藏：读屏软件不可读，但正常占据空间
   语义上的隐藏方式有：为将 aria-hidden 属性设置为 tre 使读屏软件不可读。

隐藏元素可分为三大类型：

1. 完全隐藏：元素从渲染树中消失，不占据空间。
2. 视觉上的隐藏：屏幕中不可见，占据空间。
3. 语义上的隐藏：读屏软件不可读，但正常占据空间

# 完全隐藏

1. 对 dom 元素设置 display: none; , 渲染树中元素消失
2. 在元素标签上添加属性 hidden

# 视觉上的隐藏

1. 对 dom 元素设置 opacity: 0;
2. 对 dom 元素设置 visibility: hidden;
3. 绝对定位 通过设置 position: absolute/fixed; , 然后通过 top、right、bottom、left 的 CSS 属性将 dom 元素移出可视区域。
4. 对 dom 元素设置 margin , 将元素移除可视区域。
5. 对 dom 元素设置 width: 0; height: 0;
6. 通过 CSS3 的裁剪属性 clip-path

# 语义上的隐藏 (针对读屏软件)

1. 通过设置 aria-hidden 属性为 true 使读屏软件不可读，但是元素仍然占据空间并且可见。

# 浮动总结

# 经典真题

• 清除浮动的方法

1. clear 清除浮动 (添加空 div 法) 在浮动元素下方添加空 div，并给该元素写 css 样式 clear:both;height:0;overflow:hidden;
2. 给浮动元素父级设置高度
3. 父级同时浮动《需要给父级同级元素添加浮动)
4. 父级设置成 inline-block，其 margin: 0auto 居中方式失效
5. 给父级添加 overflow:hidden 清除浮动方法
6. 万能清除法 after 伪类清浮动 (现在主流方法，推荐使用)

• 以下选项能够清除浮动的是（B）
  A: 空 div
  B: hover 伪选择器
  C: clear 属性
  D: overflow 属性

# 浮动出现的背景

最初是为了实现 "文字环绕" 的效果，让文字环绕图片，从而实现 word 中的文字环绕效果。

# 浮动实现布局

HTML 中元素，要么行内元素，要么块元素。

# 浮动的特性

1. 脱离标准流
2. 浮动的元素相互贴靠（多个浮动），若宽度不够，自动换行
3. 宽度收缩，背景填充 100%，若使用浮动，则 width: fit-content 的效果
4. 如何消除浮动的影响
   • 加高法，给父元素设置高度， 注意：给父元素设置的高度，要大于浮动子元素的高度。
   • 使用 clear 属性清除浮动， 定义了元素的哪一边（top, right, bottom, left）不使用浮动。但是 clear 会导致 margin 失效。
   • 在浮动元素之间添加一个 dom，进行设置 clear: both , 此时 margin 有效， 成为 "隔墙法""
   • 通过内墙法，清除浮动。(在浮动元素中添加一个 dom，并针对 dom 设置 clear: both )
   • overflow，原本处理溢出内容的。 当给父元素添加 overflow:hidden 之后，过这种方式也能够去除浮动的副作用。 父元素就会形成一个 BFC，一块独立的显示区域，不受外界影响，所以可以通过这种方式去除浮动
   • 伪类清除法， 目前最流行的浮动清除方式。该方法的核心思想就是为父元素设置一个伪元素，其实就是无形的添加了一堵墙，然后在伪元素中设置一系列的属性。

# 定位总结

# 经典真题

• 介绍一下 position 属性？
• position 有那些值，各自的用法如何？
• 相对定位、绝对定位、固定定位的区别？

1. static: 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。
2. relative: 相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。
3. absolute: 相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。
4. fixed: 固定定位与绝对定位相似，但元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕 时仍固定在相同位置的元素。
5. sticky: 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定闻值前为相对定位，之后为 固定定位。

# CSS 中的定位

目前，CSS 中有 5 种定位方案：

1. static 静态定位
2. relative 相对定位
3. absolute 绝对定位
4. fixed 固定定位
5. sticky 粘性定位

# static 静态定位

静态定位，就是我们的标准流。
在标准流里面，块级元素独占一行，内嵌元素共享一行。
静态定位是 HTML 元素的默认值，静态定位的元素不会受到 top，bottom，left，right 的影响。

# relative 相对定位

相对定位，就是相对自己原来的位置进行定位。
相对定位的最大特点就是不脱离标准流，相对于自己原来的位置上进行一定的偏移，并且对自己的相对定位元素有范围限制。

# absolute 绝对定位

绝对定位，就是相对于离自己最近的，并且定了位的元素进行偏移。
使用了绝对定位后的盒子，会脱离标准流，设置的 margin 也会失效， 通过 top， right， bottom, left 进行位置设置。
设置了 absolute 后 display 的值变成了 block。
默认参考点是页面的左上角。
可以通过 relative 进行修改 absolute 的参考点，当然，同样是最近且设置了 relative 元素的左上角。

# fixed 固定定位

固定定位，就是相对于浏览器窗口进行定位的。
使用了固定定位的盒子，不会受到页面滚动而影响位置。

# sticky 粘性定位

CSS3 中新增的一种定位方式: sticky。

粘性定位需要注意的几个点:

1. 父元素的 overflow 必须是 visible，不能是 hidden 或者 auto，因为父节点定位设置为 overflow:hidden 则父容器无法进行滚动。
2. 父元素的高度不能低于 sticky 元素的高度。
3. 如果父元素没有设置定位 (position:relative absolute fixed)，则相对于 viewprot 进行定位，否则以定位的父元素为参考点。
4. 设置阀值：需要指定 top、right、bottom 或 left 四个值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。并且 top 和 bottom 同时设置时，top 生效的优先级高；left 和 right 同时设置时，left 的优先级高。

可以通过浏览器属性支持信息进行浏览器对属性支持的查询

# BFC 问题

# 经典真题

• 介绍一下 BFC 以及其应用

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

1. overflow: auto | scroll | hidden
2. position: absolute | fixed

常见的 BFC 应用有：

1. 解决浮动元素导致父元素高度坍塌问题
2. 解决非浮动元素被浮动元素覆盖问题
3. 解决外边距 (margin) 垂直方向重合问题

• 介绍一下 BFC、IFC、GFC 和 FFC

1. BFC (Block formatting contexts): 翻译成中文就是 “块级格式化上下文”, 是一个独立的布局环境，BFC 内部的元素布局与外部互不影响
2. IFC (Inline formatting context): 翻译成中文就是 " 行内格式化上下文”，也就是一块区域以行内元素的形式来格式化
3. GFC (GrideLayout formating contexts): 翻译成中文就是 “网格布局格式化上下文”，将一块区域以 grid 网格的形式染格式化
4. FFC (Flex formatting contexts): 翻译成中文就是” 弹性格式化上下文”，将一块区域以弹性盒的形式来格式化

# BFC(Block formatting contexts)

翻译成中文就是 “块级格式化上下文”, 是一个独立的布局环境，BFC 内部的元素布局与外部互不影响。
简单来说，就是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC 提供了一个环境，HTML 元素在这个环境中按照一定规则达行布局。

# BFC 的布局规则：

1. 内部的 Box 会在垂直方向一个接着一个地放置。
2. Box 垂直方向上的距离由 margin 决定。属于同一个 BFC 的两个相邻的 Box 的 margin 会发生重叠
3. 每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。
4. BFC 的区域不会与浮动 Box 重叠。
5. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
6. 计算 BFC 的高度时，浮动子元素也参与计算。

# 如何形成一个 BFC？

更多的方式浏览区块格式化上下文文档

# BFC 有什么作用

1. 处理问题：处理元素设置浮动（元素脱离标准流）后导致标准流高度塌陷的问题。
   解决方案：将浮动元素的父级设置成 BFC。
2. 处理问题：处理元素设置浮动（元素脱离标准流）后导致标准流中元素重叠的问题（经典案例文档多栏）。
   解决方案：将后面的元素设置成 BFC; 对浮动元素设置 BFC 无效。
3. 处理问题：处理元素 margin 重叠（塌陷）问题的问题。
   解决方案：将其中元素的父级设置成 BFC; 对塌陷元素本身设置 BFC 无效。

# IFC(Inline formatting context)

翻译成中文就是 " 行内格式化上下文”，也就是一块区域以行内元素的形式来格式化

# GFC(GrideLayout formating contexts)

翻译成中文就是 “网格布局格式化上下文”，将一块区域以 grid 网格的形式染格式化

# FFC (Flex formatting contexts)

翻译成中文就是” 弹性格式化上下文”，将一块区域以弹性盒的形式来格式化

更多详细内容，可以查看 MDN

# CSS 属性计算过程

# 经典真题

• 请简述一下 CSS 中属性的计算是怎样的？

1. 确定声明值：参考样式表中没有冲突的声明，作为 CSS 属性值。
2. 层叠冲突：对样式表有冲突的声明使用层叠规则，确定 CSS 属性值.。
3. 使用继承：对仍然没有值的属性，若可以继承则继承父元素的值，若无法通过继承获得，就使用默认值。
4. 使用默认值：对仍然没有值的属性，全部使用默认属性值。

# CSS 中属性的计算顺序

1. 确认声明值

   作者样式和浏览器默认样式冲突，使用作者样式。 作者样式就是开发者定义的 CSS。

2. 层叠冲突

   作者样式的层叠冲突，根据选择器的权重值计算使用哪一个作者样式。

3. 使用继承

   作者样式没有对属性设置，将会检查是否有继承到某种属性，没有作者样式也没有继承到就会使用浏览器的默认值。

4. 使用默认值

   没有作者样式，某种属性也无法通过继承被定义，就会使用浏览器的默认样式。

# CSS 层叠继承规则总结

# 经典真题

• 请简述一下 CSS 中层叠规则。

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

1. 重要性 (Importance) : !important 设置该条属性值最重要，但是一般不推荐使用。
2. 专用性 (Specificity) : 专用性主要是指它能匹配多少元素，匹配得越少专用性越高。
3. 源代码次序 (Source order): 在重要性和专用性都一致的情况下，属性值取决于源代码的先后顺序。

# 层叠规则

选择器在层叠中计算属性的三个因素 (重量级按序号排序)：

1. 重要性 (important)

   优先级最高，通常在属性值后面添加 !important 。
   尽量避免使用 important，因为 important 该面了层叠的正常工作方式，调整大型样式表，会非常困难。
   但是，如果调整 UI 组件库的样式，可以使用。

2. 专用性 (Specificity)

   专用性基本上是衡量选择器的具体程度的一种方法，主要是指它能匹配多少元素。

   权重顺序 (由小到大)： 元素选择器（Element） -> 类选择器（Class） -> ID选择器（ID） -> 重要性（important）

   通用选择器（*）、复合选择器（+、>、-、空格）和否定伪类（:not）在专用性中无影响

   选择器具有的专用性的量可以用四种不同的值 (或组件) 来衡量的，它们可以被认为是千位，百位，十位和个 位，在四个列中的四个简单数字:

   • 声明是在 style 属性（默认样式），权重 + 1000
   • 选择器每包含一个 ID 选择器的样式，权重 + 100
   • 选择器每包含一个类选择器、属性选择器、伪类 权重 + 10
   • 选择器每包含一个元素选择器、伪元素 权重 + 1

3. 源代码次序 (Source order)
   如果多个相互竞争的选择器具有相同的重要性和专用性，那么第三个因素将帮助决定哪一个规则获胜，也就是说 选择哪一个选择器取决于源码顺序。
   简单地说： 谁在后面就用谁

   不过有一点大家需要注意的是，当多个 CSS 规则匹配相同的元素时，它们都被应用到该元素中。只不过后面因为层叠规则被层叠掉了而已。打开 Elements>Styles 我们就能看到:

# 继承规则

继承，就是应用于某个元素的一些属性值将由该元素的子元素继承，而有些则不会。

究竟哪些属性能够被子元素继承，可以参阅: CSS 参考

CSS 为处理继承提供四种特殊的通用属性值:

1. inherit: 该值将应用到选定元素的属性值设置为与其父元素一样
2. initial: 该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit.
3. unset: 该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得 像 initial。
4. revert: 如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性 (如果被设置)， 否则属性值被设置成用户代理的默认样式。

注: initial 和 unset 不被 IE 支持

# 继承的就近原则

由于属性值是由继承而来，所以属性值会继承离自己近的那个元素的属性。

# import 指令

# 经典真题

• CSS 引用的方式有哪些？ link 和 @import 的区别？

1. CSS 引用的方式有
   • 外联，通过 link 标签外部链接样式表
   • 内联，在 head 标记中使 style 标记定义样式
   • 嵌入，在元素的开始标记里通过 style 属性定义样式
2. link 和 @import 的区别:
   • link 属于 HTML 标签，而 @import 完全是 CSS 提供的一种方式。 link 标签除了可以加载 CSS 外，还可以做很多其它的事情，比如定义 RSS，定义 rel 连接属性等，@import 就只能加载 CSS 了。
   • 加载顺序的差别。 比如，在 a.css 中使用 import 引用 b.css，只有当使用当使用 import 命令的宿主 css 文件 a.css 被下载解析之后，浏览器才会知道还有另外一个 b.css 需要下载，这时才去下载，然后下载后开始解析、构建 render tree 等一系列操作。兼容性的差别。
   • 由于 @import 是 CSS2.1 提出的所以老的浏览器不支持，@import 只有在 E5 以上的才能识别，而 link 标签无此问题。当使用 JS 控制 DOM 去改变样式的时候，只能使用 link 标签，因为 @import 不是 DOM 可以控制的。
   • 对于可换皮肤的网站而言，可以通过改变 link 标签的 href 值来改变应用不用的外部样式表，但是对于 import 是无法操作的，毕竟不是标签。

# import 指令是什么

import 指令是用来导入 CSS 样式的。众所周期，link 也是可以导入 CSS 的样式的。

# import 的用法

1. 导入方式

<style>

   @import url("CSS样式文件路径");;

</style>

2. 可在 CSS 样式文件中导入另一个 CSS 文件

@import url("CSS样式文件路径");;

3. @import 规则还支持媒体查询，所以可以通过历来媒体的导入

@import "CSS样式文件" print;

/* 只在媒体为 print 时导入 "CSS 样式文件" */

@import "CSS样式文件" screen and (max-width: 768px);

/* 只在媒体为 screen 且视口最大宽度 768 像素时导入 "CSS 样式文件" */

# link 和 import 的区别

1. link 属于 HTML 标签，而 @import 完全是 CSS 提供的一种方式：
   • link 标签能加载 CSS、定义 RSS、定义 rel 链接属性
   • @import 只能加载 CSS
2. 加载顺序的差别
   • 对于嵌套的 CSS 样式文件加载顺序为，从外部到内部加载。
3. 兼容性的差别
   • 由于 @import 是 CSS2.1 提出的所以老的浏览器不支持，@import 只有在 E5 以上的才能识别，而 link 标签无此问题。
4. 当使用 JS 控制 DOM 去改变样式的使用，只能拿使用 link 标签，因为 @import 不是 DOM 可以控制的。
   • 对于可换皮肤的网站而言，可以通过改变 link 标签的 href 值来改变应用不用的外部样式表，但是对于 import 是无法操作的，毕竟不是标签。

另外，从性能优化的角度来讲，尽量要避免使用 @import。

使用 @import 引入 CSS 会影响浏览器的并行下载。使用 @import 引用的 CSS 文件只有在引用它的那个 CSS 文件被下载、解析之后，浏览器才会知道还有另外一个 CSS 需要下载，这时才去下载，然后下载后开始解析、构建 Render Tree 等一系列操作。

多个 @import 会导致下载顺序紊乱。在 IE 中，@import 会引发资源文件的下载顺序被打乱，即排列在 @import 后面的 JS 文件先于 @import 下载，并且打乱甚至破坏 @import 自身的并行下载。

# CSS3 的 calc 函数

# 经典真题

• CSS 的计算属性你知道吗？

即 calc () 函数，主要用于指定元素的长度，支持所有 CSS 长度单位，运算符前后都需要保留一个空格。 比如: width: calc (100% - 50px);

# CSS3 中 calc 函数

calc 是英文单词 calculate (计算) 的缩写，
新增的功能。
MDN 的解释为可以用在任何长度、数值、时间、角度、频率等处。

可以用常见的 + - * / 符号来进行运算，但需要注意的是 + 和 - 必须用空格隔开，原因很简单，如果 - 号和计算的数字挨在一起，则浏览器在解析时会认为这可能是一个负值。

# CSS3 的媒体查询（media）或媒介查询

# 经典真题

• 如何使用媒体查询实现视口宽度大于 320px 小于 640ox 时 div 元素宽度变成 30%

@media screen and (max-width: 640px) and (min-width: 320px) {

   div{

      width: 30%;

   }

}

# 媒体查询

媒体查询英文全称 Media Query， 顾名思义就是会查询用户所使用的媒体或者媒介。

现在，网页的浏览终端是越来越多了。用户可以通过不同的终端来浏览网页，例如：PC，平板电脑，手机，电视等。尽管我们无法保证一个网站在不同屏幕尺寸和不同设备上看起来一模一样，但是至少要让我们的 Web 页面能适配用户的终端。

在 CSS3 中的 Media Query (媒体查询) 模块就是用来让一个页面适应不同的终端的。

# Media Type 设备类型

常用的 3 中模式：

• all（全部）
• screen（屏幕）
• print（原页面打印或打印预览）

# 媒体类型引用方法

引用媒体类型的方法有和很多，常见的媒体类型引用方法有: link 标签、xml 方式、@import 和 CSS3 新增的 @media.
都是在满足媒体类型的情况下，才会生效。

# link 方法 (常用)

link 方法引入媒体类型其实就是在 link 标签引用样式的时候，通过 link 标签中的 media 属性来指定不同的媒体类型，如下:

<link rel."stylesheet” hrefe"index.css" media="screen" />

<link rel="stylesheet” href="print.css" media="print" />

# xml 方式

xml 方式和 link 方式比较相似，也是通过 media 属性来指定，如下:

<? xml-stylesheet rel="stylesheet" media="screen" href="style.css" ?>

# @import

@import 引入媒体类型主要有两种方式，一种是在 CSS 样式表中通过 @import 调用另一个样式文件，另外一种是 在 style 标签中引入。

注意: IE6 和 IE7 中不支持此方式

1. 样式文件中引入媒体类型：

@import url("./index.css") screen

2. style 标签中引入媒体类型：

<style>

   @import url("./index.css") screen

</style>

# @media 方式 (常用)

@media 是 CSS3 中新引进的一个特性，称为媒体查询。@media 引入媒体也有两种方式，如下:

1. 样式文件中引入媒体类型:

@media screen {

/* 具体样式 */

}

2. style 标签中引入媒体类型:

<style>

   @media screen {

      /* 具体样式 */

   }

</style>

# 媒体查询具体语法

1. Media Type(判断条件) + css(符合条件的样式规则)

2. @media 媒体类型 and (媒体特征){

   /* 具体样式  */

}

1. link 方式

<link rel="stylesheet" media="screen and (max-width:600px)" href="style.css" />

2. @media 方式

@media screen and (max-width: 600px){

   /* 具体样式 */

}

# media 的判断信息

1. 最大宽度 max-width: 该特性表示指定媒体类型小于或等于指定宽度时，样式生效。
2. 最小宽度 min-width: 该特性与 max-width 相反，即媒体类型大于或等于指定宽度时，样式生效。
3. 多个媒体特征混合使用：当需要的哟个媒体特征时，使用 and 关键字将媒体特性结合在一起。
4. 设备屏幕的输出宽度 Device Width: 在智能设备上，例如 iphone、ipad 等，可以通过 min-device-width 和 max-device-width 来设置媒体特性.
5. not 关键字: not 关键词可以用来排除某种制定的媒体特性。
6. 未指明 Media Type: 如果媒体查询中未明确指定 Media Type，就使用默认值 all。

具体可用的判断条件请浏览文档

# 过渡和动画事件

# 经典真题

• CSS3 中 transition 和 animation 的属性分别有哪些（bilibili）
• CSS 动画如何实现？

两题答案如下文。

# CSS3 过渡

过渡可以使样式变化更加丝滑。

# transition 属性

1. transition-property：指定过渡的 CSS 属性；

   值	描述	说明
   none	没有属性会获得过渡效果	无
   all	所有属性都将获得过渡效果	任何 CSS 属性变化都有过渡效果
   property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔	指定的 CSS 属性变化有过渡效果

# 多个元素过渡

如果要对多个 CSS3 属性应用过渡效果，直接用逗号分离开即可，这种主要是针对每个属性过渡的时间不同的情况

# hover 时期不同的过渡设置

分别对 dom 元素以及 hover 状态的 dom 元素设置不同的动画效果。

2. transition-duration：指定过渡所需的完成时间
   该属性主要用于设置一个属性过渡到另一个属性所需要的时间，单位为秒 (s) 或者毫秒 (ms)。默认值为 0，代表变换
   是即时的。
3. transition-timing-function：指定过渡函数（以什么样动画效果完成过渡）

4. transition-delay：指定过渡的延迟时间
   过渡延迟多久触发，单位为秒或者毫秒。但是值可以是正整数，负整数和 0。
   正整数和 0 都比较好理解，这里主要说一下负整数。负整数的计算会从整体过渡时间中去做减法运算。从过渡时间 + 延迟时间的结果的时间点开始动画，也就是负值的延时过程无丝滑动画效果。

# 过渡事件

1. transitionend 事件（监听过渡效果是否结束）

# CSS3 动画

使用 CSS3 的 animation 制作动画包含两个部分：首先是用关键声明一个动画，其次是在 animation 调用关键声明的动画。

# 声明动画

声明动画的语法规则

@keyframes animationName { keyframes-selector(css-style) }

# 使用动画

使用动画的语法规则

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-plaly-state;

1. animation-name: 指定要绑定到选择器的关键帧名称。
2. animation-duration: 指定动画需要的时间 (单位: s 或者 ms)。
3. animation-timing-function: 设置动画以什么效果完成。
4. animation-delay: 指定动画启动钱的延迟间隔。
5. animation-iteration-count: 定义动画的播放次数。

infinite 是 无限次数播放

6. animation-direction: 指定是否应该轮流反向播放动画。

7. animation-fill-mode: 规定当动画不播放时（或播放完成，或动画有一个延迟未开始播放时）， 要应用到元素的样式。
   动画播放完毕的状态，默认回到起始点。

8. animation-play-state: 指定动画是否正在运行或已暂停。
   定义动画播放还是暂停的属性。

# 动画事件

1. animationstart: CSS 动画开始后触发
2. animationiteration: CSS 动画重复播放时触发
3. animationend: CSS 动画完成后触发

# 渐进增强和优雅降级

# 经典真题

• 说说渐进增强和优雅降级？

渐进增强 ，英语全称 progressive enhancement, 指的是针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 ，英语全称 graceful degradation，一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

• 描述一下渐进增强和优雅降级之间的不同？

优雅降级是从复杂的现状开始并试图减少用户体验的供给，而渐进增强则是从一个基础的、能够起到作用的版本开始再不断扩充，以适应未来环境的需要。

# 渐进增强和优雅降级

渐进增强 ，英语全称 progressive enhancement, 指的是针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 ，英语全称 graceful degradation，一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

这两个概念其实并不是一个新的概念，就是以前提到的 "向上兼容" 和 "向下兼容"。渐进增强相当于向上兼容，优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本，或者说后期开发的版本能兼容早期开发的版本。

在确定用户群体的前提下，渐进增强：针对低版本浏览器进行页面构建，保证基本功能，再针对高级浏览器进行效
果、交互等改进和追加功能，达到更好的用户体验。

优雅降级：一开始就构建完整的功能，再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始并试图减少用户体验的供给，而渐进增强则是从一个基础的、能够起到作用的版本开始再不断扩充，以适应未来环境的需要。

例如看下面这两段代码的书写顺序，看上去只是书写顺序的不同，实则表示了我们开发的着重点:

transition { /* 渐进增强写法 自低向上 */

    -webkit-transition: all .5s;

    -moz-transition: all .5s;

    -o-transition: al1 .5s;

    transition: al1 .5s;

}

transition { /* 优雅降级写法 自顶向下 */

    transition: al1 .5s;

    -o-transition: al1 .5s;

    -moz-transition: all .5s;

    -webkit-transition: all .5s;

}

渐进增强的写法 ，优先考虑老版本浏览器的可用性，最后才考虑新版本的可用性。在时期 3 前缀 CSS3 和正常 CSS3 都可用的情况下，正常 CSS3 会覆盖前缀 CSS3。

优雅降级的写法 ，优先考虑新版本浏览器的可用性，最后才考虑老版本的可用性。在时期 3 前缀 CSS3 和正常 CSS3 都可用的情况下，前缀 CSS3 会覆盖正常的 CSS3。

绝大多少的大公司都是采用 渐进增强 的方式，因为 业务优先 ，提升用户体验永远不会排在最前面。

# CSS3 变形

# 经典真题

• 简述一下 CSS3 中新增的形变如何使用？

在 CSS3 中的变形分为 2D 变形和 3D 变形。

• 具有 X、Y 的函数: translateX、translateY、scaleX、scaleY、skewX、skewY
• 2D 形变函数: translate、scale、rotate、skew、matrix
• 3D 形变函数: rotateX、rotateY、rotate3d、translateZ、scaleZ、scale3d、matrix3d
  还有一些变形的属性如下：
• transform 属性，向元素应用 2D 或 3D 转换。
• transform-origin 属性，允许你改变被转换元素的中心位置。
• transform-style 属性，规定被嵌套元素如何在 3D 空间中显示还是 2D 平面中显示。
• perspective 属性，规定 3D 元素的透视效果。
• perspective-origin 属性，规定 3D 元素的底部位置，类似 transform-origin。
• backface-visibility 属性，定义元素在不面对屏幕时是否可见。

# CSS3 形变基本语法

transform: none | transform-funcitons;

# CSS3 的形变函数

• 具有 X、Y 的函数: translateX、translateY、scaleX、scaleY、skewX、skewY
• 2D 形变函数: translate、scale、rotate、skew、matrix
• 3D 形变函数: rotateX、rotateY、rotate3d、translateZ、scaleZ、scale3d、matrix3d

# 变形属性

# transform 属性

用来设置 CSS 形变。

# transform-origin 属性

用来设置元素的中心点位置。基本语法如下：

tansform-origin: x-axis y-axis z-axis;

# transform-style 属性

transform-style 属性是 3D 空间一个重要属性，指定了嵌套元素如何在 3D 空间中呈现。语法如下：

tansform-style: flat | preserve-3d;

# perspective 属性

多少像素的 3D 元素是从视图的 perspective 属性定义。这个属性允许你改变 3D 元素是怎样查看透视图。
定义时的 perspective 属性，它是一个元素的子元素，透视图，而不是元素本身。

perspective 属性用于设置查看者的位置，可以将可视内容映射到一个视锥上，继而投到一个 2D 视平面上。如果不指定该属性，则 Z 轴空中所有点将平铺到同一个 2D 视平面中，并且在变换结果中将不存在景深概念。

简单理解，就是视距，用来设置用户和元素 3D 空间 Z 平面之间的距离。而其效应由他的值来决定，值越小，用户与 3D 空间 Z 平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与 3D 空间 Z 平面距离越远，视觉效果就很小。

# perspective-origin 属性

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
定义时的 perspective-Origin 属性，它是一个元素的子元素，透视图，而不是元素本身。 语法如下:

perspective-origin: x-axis y-axis;

# backface-visibility 属性

backface-visibility 属性决定元素旋转背面是否可见。对于未旋转的元素，该元素的正面面向观看者。当其旋转 180
度时会导致元素的背面面向观众。该属性是设置在旋转的元素上面，语法如下:

backface-visibility: visible | hidden;

# 2D 变形

# translate 位移

2D 位移对应有 3 个变形函数，分别是 translate、translateX、translateY。正负值均可。

div{

    transform: translate(translateX-value, translateY-valeu);

}

div{

    transform: translateX(translateX-value);

}

div{

    transform: translateY(translateY-valeu);

}

# rotate 旋转

2D 旋转对应的只有 1 个变形函数 rotate。
该变形函数只接受一个值代表旋转的角度值，取值可正可负，正值代表顺时针旋转，负值代表逆时针旋转。单位 deg

div{

    transform: rotate(角度);

}

# scale 缩放

2D 位移对应有 3 个变形函数，分别是 scale、scaleX、scaleY。
该方法能够按照倍数放大或缩小元素的大小 (根据给定的宽度和高度参数)。默认值为 1，小于这个值就是缩小 大于这个值就是放大。

div{

    transform: scale(scaleX-value, scaleY-valeu);

}

div{

    transform: scaleX(scaleX-value);

}

div{

    transform: scaleY(scaleY-valeu);

}

# skew 倾斜

2D 倾斜对应的变形函数也是 3 个，分别是 skew、skewX、skewY。ax、ay 分别表示 x 轴方向、y 轴方向倾斜的角度。单位 deg

div{

    transform: skew(ax, ay);

}

div{

    transform: skewX(ax);

}

div{

    transform: skewY(ay);

}

# 2D 矩阵

虽然 CSS3 为我们提供了上述的变形函数方便我们进行元素的变形操作， 但是毕竟函数个数有限，有些效果是没有提供的， 例如镜像翻转的效果。此时就轮到 2D 矩阵函数 matrix 登场了

matrix 有六个参数

matrix(a, b, c, d, e, f)

六个参数对应的矩阵

矩阵与原坐标矩阵相乘计算坐标如下

# 矩阵实现偏移

偏移后坐标 (x‘, y’), 原始坐标 (x, y) 计算偏移后的坐标公式：

x’ = x + x 的偏移量
y’ = y + y 的偏移量

所以换成 matrix 函数就是：

matrix (0, 0, 0, 0, e (x 的偏移量)， f (y 的偏移量))

# 矩阵实现缩放

缩放后坐标 (x’, y’), 原始坐标 (x, y) 计算缩放后的坐标公式：

x’ = x + x 的缩放倍数
y’ = y + y 的缩放倍数

所以换成 matrix 函数就是：

matrix (a (x 的缩放倍数), 0, 0, d (y 的缩放倍数), 0, 0)

# 矩阵实现旋转

旋转需要实现

水平倾斜角度 = - 垂直倾斜角度

旋转用到的相变函数 rotate (θ), 其中 θ 为旋转角度，套用上面公式为：

x’ = xcos(θ) - ysin(θ) + 0 = xcos(θ) - ysin(θ)
y’ = xsin(θ) + ycos(θ) + 0 = xsin(θ) + ycos(θ)

所以换成 matrix 函数就是：

matrix (a (cos (θ) 的值), b (sin (θ) 的值), c (-sin (θ) 的值), d (cos (θ) 的值), 0, 0)

# 矩阵实现倾斜

倾斜后坐标 (x’, y’), skew (θx, θy) 将一个元素按指定的角度在 x 轴和 y 轴上倾斜。
倾斜对应的公式:

x’ = x + ytan(θx) + 0 = x + ytan(θx)
y’ = xtan(θ) + y + 0 = xtan(θ) + y

所以换成 matrix 函数就是：

matrix (0, b (tan (θy) 的值), c (tan (θx) 的值), 0, 0, 0)

# 矩阵实现镜像变形（重头戏哦）

镜像后坐标 (x’, y’), 原始坐标 (x, y) 计算镜像后的坐标公式：

1. 水平镜像就是 y 坐标不变，x 坐标变负。
   水平镜像对应的公式:

x’ = -x
y’ = y

所以换成 matrix 函数就是：

matrix(a(-1), 0, 0, d(1), 0, 0)

2. 垂直镜像对应的公式:

x’ = x
y’ = -y

所以换成 matrix 函数就是：

matrix(a(1), 0, 0, d(-1), 0, 0)

3. 水平镜像 + 倒立 对应的公式:

x’ = -x
y’ = -y

所以换成 matrix 函数就是：

matrix(a(-1), 0, 0, d(-1), 0, 0)

4. 90 度旋转 + 镜像 对应的公式:

x’ = y
y’ = x

所以换成 matrix 函数就是：

matrix(0, b(1), c(1), 0, 0, 0)

5. -90 度旋转 + 镜像 对应的公式:

x’ = -y
y’ = -x

所以换成 matrix 函数就是：

matrix(0, b(-1), c(-1), 0, 0, 0)

# 3D 变形

使用二维变形能够改变元素在水平和垂直轴线，然而还有一个轴沿着它，可以改变元素。使用三维变形，可以改变元素在 Z 轴位置。

# translate 位移

3D 位移包括 translateZ 和 translate3d 两个变形函数。语法如下:

transform: translate3d(tx, ty, tz)

perspective: xxx; // 视距

transform: translateZ(tz)

1. tx: 在 x 轴上的位移距离
2. ty: 在 y 轴上的位移距离
3. tx: 在 z 轴上的位移距离，值越大，元素离观察者越近。否则，反之。

# rotate 旋转

3D 位移包括 rotateX、rotateY、rotateZ 和 rotate3d 四个变形函数。

transform: rotate3d(rx, ry, rz)

transform: rotateX(rx)

transform: rotateY(ry)

transform: rotateZ(rz)

rx, ry, rz 分别为 x, y, z 轴上的旋转角度。

# scale 缩放

3D 位移包括 scaleZ 和 scale3d 两个变形函数。

transform: scale3d(sx, sy, sz)

transform: scaleZ(sz)

transform: rotateY(ry)

transform: rotateZ(rz); 与 transform-style: preserve-3d; 一起使用。

sx, sy, sz 分别为 x, y, z 轴上的缩放比例。

注意： z 上的缩放是改变元素厚度，要把元素设置为立方体才能观察到。

# 3D 矩阵

3D 矩阵功能函数 matrix3d。 3D 中不能斜切。

matrix3d 有 16 个参数

matrix(sx,0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)

六个参数对应的矩阵

矩阵与原坐标矩阵相乘计算坐标如下

# 矩阵实现位移

translate3d (tx, ty, tz) 等价于 matrix3d (1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, tx, ty, tz,1)

# 矩阵实现缩放

scale3d (sx, sy, sz) 等价于 matrix3d (sx, 0, 0, 0, 0, sy,0, 0, 0, 0, sz, 0, 0, 0, 0, 1)

# 矩阵实现旋转

rotate3d (x, y, z, α) 还是算了太复杂了。

# 渐进式渲染

# 经典真题

• 什么是渐进式渲染

渐进式渲染 ，英文全称 progressive rendering，也被称之为 惰性渲染 ，指的是为了提高用户感知的加载速度，以尽快的速度来呈现页面的技术。
渐进式渲染不是某一种技术，二十各种技术的集合。
例如:

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

# 渐进式渲染

渐进式渲染 ，英文全称 progressive rendering，也被称之为 惰性渲染 ，指的是为了提高用户感知的加载速度，以尽快的速度来呈现页面的技术。

渐进式渲染不是某一种技术，二十各种技术的集合。

# 骨架屏

在加载网络数据时，为了提升用户体验，通常会使用一个转圈圈的 loading 动画，或者使用 Skeleton Screen 占位。相比与 loading 动画，Skeleton Screen 的效果要更生动。

# 图片懒加载

图片懒加载就是先加载部分图片，剩余的图片等到需要的时候再加载。这在电商网站中尤其常见。

# 图片占位符

在网页加载的时候，某些图片还在请求中或者还未请求，这个时候就先找一个临时代替的图像，放在最终图像的位置上，但是这只是临时替代的图形，当图片数据准备好以后，会重新渲染真正的图形数据。

# 拆分网页资源

大部分用户不会用到一个网站的所有页面，但我们通常的做法却是把所有的功能都打包进一个很大的文件里面。个 bundle.js 文件的大小可能会有几 M，一个打包后的 style.css 会包含网站的一切样式，从 CSS 结构定义到网站在各个版本的样式：移动端、平板、桌面、打印版等等。

但用户并不是一开始就需要所有的资源，所有我们可以对资源进行拆分，首先加载那些关键的资源，其他的资源等 到需要的时候再去加载它。

更多关于渐进式渲染的内容，可参考 MDN 文档

# CSS 渲染性能优化

# 经典真题

• 如何提升或者优化 CSS 的渲染性能

答案如下。

# CSS 渲染性能优化

网站优化的目标就是减少网站加载时间，提高响应速度。

1. 使用 id 选择器是非常高效的。
2. 避免深层次的 node ，嵌套过深。
3. 不要使用 attribute 选择器，如：p [att1="val"]，这样的匹配非常慢。更不要把 id 这样设置。
4. 通常将浏览器前缀至于前面，标准样式属性置于后面。
5. 能用 CSS 做到的，就不要使用 JS。
6. 遵守 CSSLint 规则。 CSSLint
7. 不要使用 @import。影响浏览器并行下载。
8. 避免过分重排，即重新排列（Reflow）和重绘，即重新绘制（repaint）。

• 避免通过 js 调整样式，尽量通过修改 CSS 类 来实现样式变化。减少不必要的重排和重绘。
• 避免频繁修改会触发重排的布局属性，如 width、height、margin、padding。
• 做动画时使用 transform 和 opacity，它们只会触发重绘。其中 CSS 的 transform 来触发 GPU 加速，可以优化一些复杂的动画。
• 避免使用 table 布局，它可能导致性能问题，尤其是在动态内容变化时。
• 使用 Flexbox 和 Grid 布局可以更好地处理布局，避免复杂的计算和重排。

9. 依赖继承，能继承就不要重写。
10. 文件压缩。
11. 背景图片合并。

# 层叠上下文

# 经典真题

• 什么是层叠上下文、什么是层叠等级、什么是层叠顺序。

答案如下。

# 层叠上下文

每个 HTML 元素都可能形成一个层叠上下文，层叠上下文是一个三维的概念，包括 z 轴（层叠等级）。元素的层叠等级只在其所属的层叠上下文内有效。

假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。
某些元素的渲染顺序是由其 z-index 的值影响的。这是因为这些元素具有能够使他们形成一个层叠上下文的特殊属性。

z-index 需要满足的条件

# 层叠等级

层叠等级（z-index）是指在 HTML 和 CSS 中，元素在层叠上下文中的深度顺序，即一个元素相对于其他元素的视觉显示顺序。层叠等级的概念通常用于处理页面上不同元素的叠放顺序。

在网页中，元素的层叠等级是由 CSS 的 z-index 属性来控制的。 z-index 属性是一个整数值 ，表示元素的层叠等级，它决定了元素在层叠上下文中的显示顺序，值越大的元素越靠前，即越接近用户。

# 层叠顺序

层叠顺序（stacking order）是指在 Web 页面上，HTML 元素在三维空间中的深度顺序，即元素在视觉上的叠放顺序。这个概念是由 CSS 中的层叠上下文（stacking context）和层叠等级（z-index）共同决定的。

层叠顺序有助于定义页面中元素的叠放关系，决定哪个元素位于其他元素的前景或背景，根据层叠等级数值大小进行排序。

# 层叠上下文总结：

• 层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。
• 每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
• 每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。
• 层叠等级：随着 z-index 的数值越大，越靠近用户。
• 层叠顺序：根据层叠等级数据大小进行相应的排序。

# CSS3 遮罩

# 什么是 CSS3 遮罩

CSS3 遮罩（CSS3 Mask）是一种在 HTML 元素上创建视觉遮罩效果的技术。遮罩允许你定义一个图形，然后使用这个图形来控制元素的可见性。这在创建复杂形状、渐变遮罩或图像遮罩等效果时非常有用。

CSS3 遮罩主要通过两个属性来实现： mask-image 和 mask-composite 。
outline

就是 photoshop 中的 蒙版效果

CSS3 遮罩（CSS3 Mask）是一种在 HTML 元素上创建视觉遮罩效果的技术。遮罩允许你定义一个图形，然后使用这个图形来控制元素的可见性。这在创建复杂形状、渐变遮罩或图像遮罩等效果时非常有用。

CSS3 遮罩主要通过两个属性来实现：mask-image 和 mask-composite。

# mask-image

用于指定遮罩效果的图像。可以使用普通的图片，也可以使用线性渐变（linear gradients）、径向渐变（radial gradients）或者 SVG 图像。

element {

  mask-image: url('mask-image.png');

}

element {

  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);

}

# mask-repeat

表示遮罩层是否允许重复。默认值是 repeat 允许重复。mask-repeat 的可用值与 background-repeat 一致。

# mask-position

用来设置遮罩层的位置。默认值是 左上角在（0， 0）位置。mask-position 的可用值与 background-position 一致。

# mask-size

用来设置遮罩层的大小。默认值是 auto。mask-size 的可用值与 background-size 一致。

# mask-origin

默认值为 border-box。mask-origin 的可用值与 background-origin 一致。

# mask-clip

默认值为 border-box。mask-clip 的可用值与 background-clip 一致。

# mask-composite

mask-composite 属性表示同时使用多张图片进行遮罩时的合成方式。默认值为 add。可选值为 add、subtract、intersect、exclude.

更多关于 mask 的内容