这个问题的关键在于理解： md: 不是运行时逻辑，而是 构建期的变体（variant）展开机制。

在 Tailwind CSS 中，响应式系统建立在三个核心之上：

• screens 配置映射
• 变体解析机制
• JIT 构建阶段规则生成

一、md: 本质是什么？

当写：

<div class="md:text-red-500">

Tailwind 在构建阶段会将其解析为：

• variant：md
• utility：text-red-500

然后生成如下 CSS：

@media (min-width: 768px) {
  .md\:text-red-500 {
    color: #ef4444;
  }
}

关键点：

• md: 只是一个前缀标记
• 构建阶段转换成 @media
• 冒号会被转义为合法 CSS 选择器

二、断点从哪里来？

断点定义在配置文件中：

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    }
  }
}

md 映射为：

@media (min-width: 768px)

本质是一个键值映射表。

三、构建阶段做了什么？

在 JIT 模式下，流程是：

1. 扫描源码中的 class
2. 拆分出 variant 与 utility
3. 生成基础规则
4. 根据 variant 包裹规则

例如：

md:hover:text-red-500

会解析为：

• variant1：md
• variant2：hover
• utility：text-red-500

生成结果：

@media (min-width: 768px) {
  .md\:hover\:text-red-500:hover {
    color: #ef4444;
  }
}

可以看出，变体系统是可组合的，类似规则生成管线。

四、为什么不是运行时判断？

原因有两个：

第一，性能稳定。 所有规则提前生成，浏览器只执行标准 CSS。

第二，逻辑简单。 完全依赖浏览器原生 @media 机制，不需要 JS 监听 resize。

五、移动优先原则

Tailwind 默认采用 mobile-first。

写法：

text-red-500 md:text-blue-500

含义：

• 默认红色
• 屏幕宽度 ≥ 768px 时变蓝

生成顺序保证：

• 基础规则在前
• media query 在后
• 利用 CSS 层叠覆盖

六、抽象理解

可以把 Tailwind 的响应式机制理解为：

对基础 utility 规则进行“包装”。

伪逻辑可以理解为：

生成基础规则
如果有 screen 变体 → 用 @media 包裹
如果有伪类变体 → 添加伪类选择器

这是一种构建期规则生成模型，而不是条件分支执行。

这个问题如果只回答“因为类名不会冲突”是远远不够的。

Tailwind 解决样式冲突，本质上是通过 设计约束 + 原子化模型 + 构建期生成策略，从源头消除冲突的产生条件，而不是事后避免覆盖。

下面从机制层面拆解。

一、传统 CSS 为什么容易冲突

传统样式冲突来自三个方面：

1. 选择器冲突

.btn { color: red; }
.button { color: blue; }

不同模块命名不规范会互相覆盖。

2. 层级嵌套带来的权重问题

.page .btn { ... }

权重升级，导致后续难以覆盖。

3. 样式全局污染

CSS 默认是全局作用域，没有隔离边界。

二、Tailwind 的核心解决思路

以 Tailwind Labs 开发的 Tailwind CSS 为例，其核心思想是：

不写语义类，不写组件类，只写功能类。

1. 原子化（Utility First）

<div class="text-red-500 bg-blue-200 p-4">

每个 class 只负责一个属性：

• text-red-500 → color
• bg-blue-200 → background
• p-4 → padding

不会出现“一个类定义多个属性”的情况，因此冲突范围极小。

2. 单一职责类避免交叉覆盖

传统写法：

.card {
  padding: 20px;
  color: red;
}

如果只想改颜色，就必须覆盖整个类。

Tailwind 里：

<div class="p-5 text-red-500">

属性天然解耦，不存在样式耦合冲突。

3. 统一的优先级策略

Tailwind 通过构建期生成 CSS，保证：

• 所有 utility class 权重一致
• 基本不使用复杂选择器
• 几乎不依赖层级嵌套

因此冲突只来自“同一属性的后写类覆盖前写类”。

例如：

<div class="text-red-500 text-blue-500">

后者覆盖前者。

规则简单且可预测。

4. 变体机制是可控叠加

响应式、hover、focus 等都通过前缀实现：

hover:text-red-500
md:text-blue-500

这些变体在生成 CSS 时有明确顺序规则，不依赖手写层级。

5. 构建期裁剪（避免隐性冲突）

Tailwind 使用 JIT 模式：

• 只生成使用到的类
• 不存在无关样式残留

这减少了“未知样式干扰”的可能。

三、为什么它几乎不需要 BEM

传统为了解决冲突，会使用：

• BEM
• CSS Modules
• Scoped CSS

而 Tailwind 的模型是：

• 不产生语义命名
• 不产生模块耦合
• 所有类都是扁平的功能声明

冲突空间天然极小。

四、是否完全没有冲突？

不是。

冲突仍然可能出现在：

1. 同一属性重复声明

text-sm text-lg

后者覆盖前者。

2. 自定义 CSS 与 Tailwind 混用

如果写了：

.button { color: red; }

再加：

<button class="text-blue-500">

具体谁生效，取决于加载顺序与权重。

3. 使用 @apply 时可能回到传统问题

@apply 本质上是展开成普通 CSS， 如果滥用，会重新引入耦合。

五、本质总结

Tailwind 并不是“避免冲突”，而是：

• 限制表达方式
• 原子化拆解样式
• 统一权重规则
• 构建期控制输出

通过架构层面消除冲突产生的土壤。

实现固定宽高比容器的核心，是让高度由宽度推导出来，而不是直接写死高度。围绕这一目标，随着 CSS 能力的演进，实践方式也发生了明显变化。

在较早阶段，最常见的做法是利用 百分比 padding 的计算规则。在 CSS 中，纵向的 padding-top / padding-bottom 百分比是相对于父元素宽度计算的，这一点恰好可以用来推导高度。一个 16:9 的容器，本质上就是高度等于宽度的 56.25%。因此可以通过一个“占位层”来撑开高度，再用绝对定位承载真实内容。这种方式兼容性极好，在旧项目或需要兼容老浏览器时仍然可靠，但结构上需要多一层包裹，语义和可读性都不算理想。

随着现代浏览器能力的提升，CSS 已经原生支持了 aspect-ratio 属性。通过直接声明宽高比，浏览器可以在布局阶段自动计算高度，无需额外 hack。对于一个响应式容器，只需要控制宽度，浏览器就能按比例推导出高度。这个方案在语义、可维护性和可读性上都明显优于传统 padding 技巧，非常适合新项目和组件库场景。需要注意的是，当容器内部存在绝对定位或内容溢出时，仍然需要配合 overflow 等属性进行约束。

在一些布局受限的场景下，例如容器高度受父级约束，也可以通过 Flex 或 Grid 间接实现比例控制。通过让容器在某个维度上参与布局，而另一个维度通过计算或约束推导出来，可以实现近似的固定比例效果。不过这种方式通常依赖上下文条件，更适合作为补充方案，而非通用解法。

在实际工程中，选择哪种方案取决于项目的浏览器支持范围和组件复用要求。老项目或跨端环境优先选择 padding 百分比方案，新项目和现代浏览器环境应优先使用 aspect-ratio，以减少结构复杂度和潜在 bug。

在前端开发中，CSS 布局技术是核心能力，不同技术各有特点和适用场景。主要可以分为 传统布局、弹性布局 和 现代布局 三大类。

1. 传统布局

（1）块级布局（Block Layout）

• 基于文档流，块级元素默认垂直排列。

• 特点：

  • 容器高度由内容撑开。
  • 水平排列需要浮动或 inline-block 配合。

• 适用场景：

  • 文本内容、文章流式布局。
  • 简单的结构页面，兼容老浏览器。

（2）浮动布局（Float Layout）

.left { float: left; width: 200px; }
.right { float: right; width: 200px; }

• 特点：

  • 元素脱离普通文档流，占据左右空间。
  • 需要清除浮动 (clearfix) 以避免容器高度塌陷。

• 适用场景：

  • 早期多栏布局。
  • 图文环绕、简单侧边栏布局。

（3）定位布局（Position Layout）

• position: static | relative | absolute | fixed | sticky

• 特点：

  • 脱离文档流或相对位置偏移。
  • 可以实现重叠、固定位置或粘性滚动效果。

• 适用场景：

  • 弹窗、工具提示、固定导航栏。

2. 弹性布局（Flexbox）

.container {
  display: flex;
  justify-content: center; /* 主轴对齐 */
  align-items: center;     /* 侧轴对齐 */
}

• 特点：

  • 一维布局（主轴/交叉轴），可控制排列方向和对齐方式。
  • 子元素大小可以自适应、分配剩余空间。
  • 可以轻松实现居中、间距分布、响应式伸缩。

• 适用场景：

  • 水平或垂直居中。
  • 导航菜单、按钮组、列表项等一维布局场景。

3. 现代布局（CSS Grid）

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 100px auto;
  gap: 10px;
}

• 特点：

  • 二维布局（行 + 列）能力强。
  • 可以显式定义行列大小、间距和区域命名。
  • 支持复杂的响应式布局。

• 适用场景：

  • 页面整体布局（头部、侧边栏、内容区、底部）。
  • 表格型布局、网格画廊、仪表盘等。

4. 其他布局方式

• 多列布局（Multi-column Layout）

  • column-count / column-width
  • 将内容自动分成多列，类似报纸排版。

• 表格布局（Table Layout）

  • display: table | table-row | table-cell
  • 适合数据表格或等高布局场景。

• CSS Shapes / Float + Shape

  • 用于文字环绕图片或不规则形状布局。

5. 对比总结

原子化 CSS 是一种将样式分解为最小化、独立的单一功能类名的 CSS 设计方法。每个类名通常只定义一个特定样式（例如设置颜色、边距、字体大小等），然后在 HTML 中通过组合这些类来构建界面。Tailwind CSS 是这种方法的代表框架之一。

原子化 CSS 的核心理念

原子化 CSS 旨在通过拆分样式、最小化样式单元来避免传统样式表中的复杂性问题，并通过小而精确的类名提供了更高的灵活性和复用性。

示例

传统的样式表可能会写出：

/* 传统 CSS */
.button {
    background-color: blue;
    padding: 10px;
    border-radius: 5px;
}

而原子化 CSS 则会分解为单一功能类：

/* 原子化 CSS */
.bg-blue { background-color: blue; }
.p-10 { padding: 10px; }
.rounded-5 { border-radius: 5px; }

HTML 中组合使用这些类：

<button class="bg-blue p-10 rounded-5">按钮</button>

原子化 CSS 的优势

1. 更高的复用性：

   • 每个类都只包含一个样式，可以在多个组件或页面中复用，减少重复代码。

2. 更高的灵活性：

   • 由于每个类代表一个特定样式，开发者可以自由组合这些类来实现各种效果，无需频繁编写新样式。

3. 降低样式冲突：

   • 原子化 CSS 避免了命名空间冲突的问题，不需要担心不同组件之间的样式覆盖，因为每个类只包含一个特定的功能，不依赖上下文。

4. 更快速的构建和样式更新：

   • 在构建时无需重新定义类名，开发者可以直接在 HTML 中组合样式类，使得开发更高效。

原子化 CSS 的不足

1. 可读性差：

   • 大量短小的类名堆积在一起，可能会降低 HTML 的可读性，尤其是对于不熟悉代码的团队成员。

2. 依赖 HTML 类名：

   • 大量的样式依赖于 HTML 的类名，导致 HTML 和 CSS 之间的分离不再明显，这对代码的结构化有一定影响。

3. 学习曲线：

   • 原子化 CSS 需要开发者熟悉大量的短小类名和命名规则，例如 Tailwind CSS 的命名规则，可能对新手来说有一定的学习难度。

常见的原子化 CSS 框架

1. Tailwind CSS：最流行的原子化 CSS 框架，提供了大量的原子类，可以直接用于构建复杂的布局和样式。
2. Tachyons：类似于 Tailwind，提供了小而独立的样式类，支持快速原型和构建。

原子化 CSS 的应用场景

• 快速原型设计：可以快速迭代页面，不需要定义大量的样式。
• 小型项目：项目简单、页面少的情况下，原子化 CSS 可以大大提升开发速度。
• 组件库：在构建组件库时，可以使用原子类创建灵活、可组合的组件。

position: sticky 是一种结合了 relative 和 fixed 特性的定位方式，在一定的滚动范围内表现为相对定位，但当达到设定的阈值时会变成固定定位。它在前端开发中常用于创建随滚动动态固定的内容，提升用户体验。以下是一些常见的应用场景：

1. 导航栏固定

• 场景：页面有一个较长的内容，当用户滚动页面时，导航栏可以保持在视口顶部，方便用户随时访问导航选项。
• 这种场景中使用 sticky 使导航栏在滚动时停留在顶部。

.navbar {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1000;
}

2. 内容目录（TOC）

• 场景：在文章页面中，常有一个内容目录（Table of Contents）来帮助用户快速跳转到对应章节。使用 sticky 可以让目录随着用户的滚动停留在侧边，便于用户随时查看。

.toc {
    position: sticky;
    top: 20px; /* 距离顶部 20px */
}

3. 表头固定

• 场景：在一个有滚动条的表格中，让表头保持固定，以便用户在查看数据时，始终能看到列的名称。
• 在表头元素上使用 position: sticky; top: 0;，可以让表头在滚动时停留在表格的顶部。

th {
    position: sticky;
    top: 0;
    background-color: #f1f1f1;
}

4. 浮动的侧边栏

• 场景：在一个带有侧边栏的布局中，可以使侧边栏随滚动保持在视口的一个固定位置，避免用户需要返回顶部才能看到侧边内容。
• 设置 top 值，让侧边栏在到达该位置时停留。

.sidebar {
    position: sticky;
    top: 10px; /* 在距离视口顶部 10px 时固定 */
}

5. 分段内容的标题固定

• 场景：长文档或博客文章中，常分成多个章节，每一章节的标题可以使用 sticky 实现“吸附效果”。当用户滚动到每一章节时，标题会停留在顶部，清晰指示当前章节内容。
• 设置 top 值，让标题随章节滚动到顶部时停留。

.section-title {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
}

6. 购物车或价格信息的固定

• 场景：在电商产品页面中，当用户浏览详细信息时，可以将购物车按钮或价格信息固定在侧边或底部，便于用户快速访问结算功能。

.price-info {
    position: sticky;
    top: 10px;
}

CSS 变量（也叫自定义属性）是 CSS 中的一项重要特性，允许开发者在样式表中定义可以重复使用的值，并可以在不同的地方引用这些值。CSS 变量使得样式的管理和维护更加灵活，尤其在处理复杂的设计系统和动态主题时非常有用。

1. 定义 CSS 变量

CSS 变量使用 -- 前缀来定义，并且可以在任意选择器中定义。它们可以在任何作用域中声明，作用域决定了变量的可访问范围。

:root {
    --primary-color: #3498db; /* 定义全局变量 */
}

• :root 选择器表示文档的根元素（通常是 <html>），定义在 :root 中的变量是全局变量，可以在整个文档中使用。
• 可以在其他元素或类中定义局部变量，但这些变量的作用域仅限于其定义的上下文。

2. 使用 CSS 变量

使用 CSS 变量时，通过 var() 函数来引用变量的值。例如：

body {
    background-color: var(--primary-color); /* 使用 CSS 变量 */
}

• var(--primary-color) 用来获取 --primary-color 变量的值，并将其应用于 background-color 属性。

3. 作用域

• 全局作用域：如果在 :root 中定义变量，它可以在整个文档中访问。
• 局部作用域：如果在某个元素或类中定义变量，它仅在该元素及其子元素中有效。

:root {
    --global-color: red; /* 全局变量 */
}

.container {
    --container-color: green; /* 局部变量，仅在.container及其子元素有效 */
}

.header {
    color: var(--global-color); /* 使用全局变量 */
}

.footer {
    color: var(--container-color); /* 使用局部变量 */
}

4. 默认值

CSS 变量可以为 var() 函数提供一个默认值，当变量未定义或值为空时，使用默认值。默认值在 var() 的第二个参数中指定。

.content {
    color: var(--text-color, black); /* 如果 --text-color 未定义，则使用 black */
}

5. 动态修改 CSS 变量

CSS 变量具有动态性，可以通过 JavaScript 来修改它们的值。修改变量时，浏览器会立即重新渲染受影响的元素，使得它们能够响应变化。

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

• 这段代码修改了 :root 中定义的 --primary-color 变量，使其值变为 #e74c3c，并立即应用到文档中的所有引用此变量的地方。

6. 继承和覆盖

CSS 变量支持继承，这意味着子元素可以继承父元素定义的变量的值。变量可以被覆盖，并且具有局部作用域。

:root {
    --main-color: blue;
}

.child {
    --main-color: red; /* 重写父元素的 --main-color 变量 */
    color: var(--main-color); /* 子元素的文字颜色为 red */
}

在这个例子中，.child 类中的 --main-color 会覆盖 :root 中的全局变量。

7. 支持的浏览器

CSS 变量被大多数现代浏览器支持，包括 Chrome、Firefox、Safari 和 Edge。但在老版本的浏览器（如 IE）中并不支持，因此在使用时需要考虑兼容性问题。

gap 属性用于设置在网格布局（grid）或弹性布局（flex）中，子元素（项目）之间的间距。它可以同时设置行间距和列间距，或者分别通过 row-gap 和 column-gap 单独设置。

• 适用于：grid 和 flex 布局
• 示例：

  .container {
    display: flex;
    gap: 10px;
  }
  

可以使用 CSS 的 background 和 -webkit-background-clip 属性来实现

具体方法

1. 设置文字的 background 为渐变色。
2. 使用 -webkit-background-clip: text; 将背景裁剪为文字形状。
3. 使用 color: transparent; 隐藏文字的原始颜色，确保只显示渐变背景。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .gradient-text {
            font-size: 48px;
            font-weight: bold;
            background: linear-gradient(90deg, #ff7f50, #1e90ff); /* 定义渐变颜色 */
            -webkit-background-clip: text;
            color: transparent; /* 隐藏原始文本颜色 */
        }
    </style>
    <title>Gradient Text</title>
</head>
<body>

    <h1 class="gradient-text">渐变文字效果</h1>

</body>
</html>

解释：

• background: linear-gradient(...): 定义从左到右的渐变色。
• -webkit-background-clip: text: 让背景裁剪成文字的形状。
• color: transparent: 使文本颜色透明，从而显示背景的渐变效果。

要在未知高度和宽度的元素中实现水平和垂直居中，可以使用多种 CSS 技巧。以下是几种常见的方案以及它们的简单手写实现：

1. Flexbox

HTML：

<div class="container">
  <div class="centered-element">Centered</div>
</div>

CSS：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 使容器填满视口 */
}

.centered-element {
  /* 元素的样式 */
}

2. Grid

HTML：

<div class="container">
  <div class="centered-element">Centered</div>
</div>

CSS：

.container {
  display: grid;
  place-items: center;     /* 同时水平和垂直居中 */
  height: 100vh;           /* 使容器填满视口 */
}

.centered-element {
  /* 元素的样式 */
}

3. Absolute + Transform

HTML：

<div class="container">
  <div class="centered-element">Centered</div>
</div>

CSS：

.container {
  position: relative;
  height: 100vh;           /* 使容器填满视口 */
}

.centered-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 使元素居中 */
}

4. Line-Height (适用于单行文本)

HTML：

<div class="container">
  <div class="centered-element">Centered</div>
</div>

CSS：

.container {
  height: 100vh;           /* 使容器填满视口 */
  line-height: 100vh;      /* 设置行高为容器高度 */
  text-align: center;      /* 水平居中 */
}

.centered-element {
  display: inline-block;
  vertical-align: middle; /* 垂直居中 */
  line-height: normal;    /* 恢复正常行高 */
}

浏览器会『从右往左』解析CSS选择器。

CSS选择器的解析顺序

相信很多人在一开始接触CSS的时候都会看到一条规则就是尽量少使用层级关系，比如尽量不要写成：

#div P.class {
    color: red;
}

而是写成：

.class {
    color: red;
}

之所以需要这么写，给的解释是这样可以减少选择器匹配的次数。 初看觉得哦，有点道理啊，但是往细了再想想： 如果我把层级定的足够的清晰分明，那不是可以直接去掉很多不对应的CSS选择器的索引路径的么？为什么都是建议少使用层级关系呢？

原因其实很简单，我们犯了一个经验主义错误，默认CSS选择器是从左往右进行解析的，实际上恰恰相反，CSS选择器是从右往左解析的。

CSS选择器进行优化的必要性

再次看下图：

在图中我们可以看到HTML解析出了一颗DOM tree，与此同时样式脚本则解析生成了一个style rules，也可以说是一个CSS tree。 最后，DOM tree同style rules一同结合解析出一颗Render Tree， 而Render Tree就是包含了一个dom对象以及为其计算好的样式规则，提供了布局以及显示方法。

因为不清楚一个DOM对象上究竟对应着哪些样式规则，所以只能选择一个最笨的办法， 即每一个DOM对象都遍历一遍style rules，DOM对象的数量相信大家也都清楚， 如果每次遍历style rules都是像一个晒太阳的老大爷一样的悠哉游哉，因此对CSS选择器进行优化就是一个必须的事情了。

从右往左解析到底好在哪里

假如有如下的一段HTML：

<div id="div1">
    <div class="a">
        <div class="b">
            ...
        </div>
        <div class="c">
            <div class="d">
                ...
            </div>
            <div class="e">
                ...
            </div>
        </div>
    </div>
    <div class="f">
        <div class="c">
            <div class="d">
                ...
            </div>
        </div>
    </div>
</div>

和如下的CSS：

#div1 .c .d {}
.f .c .d {}
.a .c .e {}
#div1 .f {}
.c .d{}

假如我们的CSS解析器是从左往右进行匹配的，那么会生成如下的style rules：

首先，#div1 .c .d ｛｝ .f .c .d ｛｝.c .d｛｝这三个选择器里面都含有 .c .d｛｝这么一个公用样式， 所以哪怕是我们的DOM节点明确了是在#div1下面都必须对style rules进行全部的匹配查找， 这样一来基本上可以说是每一个DOM节点都必须完全遍历一遍style rules， 不然搞不好就会漏掉一些公用样式之类的，所以想着将层级写的更加详细就能去掉很多不对应的CSS选择器的索引路径的就不要想了， 不管你写的多细，你总是需要把整个style rules都遍历一遍，不然万一漏掉了某个公用样式不就思密达了？

那么如果我们换成从右向左进行解析就能够避免这种情况了么？请看下面这个style rules：

别的先不提，最少这个节点就少了很多嘛，哪怕我这里同样是需要全部遍历一遍就冲着减少了这么多个节点也要从右往左进行解析啊！

更重要的是，只要有公用样式，那么选择器最右边的那个类型选择器一定是相同的，如此公共样式就很自然的都集中到一个分支上， 这个时候我们完全可以将其他不匹配的路径全部去掉而不用担心会漏掉某些个公用样式了。

虽然当这颗CSS树在遍历的时候还有有部分节点会遍历到最后才能确定到底是不是匹配的，

但总的来说从右往左进行解析还是会比从左往右解析要少很多次的匹配，这样带来的效率提升是显而易见的！

同时，这也是不建议使用*通配符来进行样式匹配的原因：浏览器专门建立了一个反常规思维的从右往左的匹配规则就是为了避免对所有元素进行遍历。

最后，从右往左进行解析还有一个好处那就是从右往左进行匹配的时候，匹配的全部是DOM元素的父节点，而从左往右进行匹配的时候时候，匹配的全部是DOM元素的子节点，这样就避免了HTML与CSS没有下载完需要进行等待的情形。

CSS 提供了多种尺寸单位，用于设置元素的大小、位置和其他样式属性。主要的尺寸单位包括：

1. 绝对单位

• px（像素）：固定的单位，适用于设备屏幕上的精确像素。

  width: 100px;
  

• cm（厘米）：用于印刷样式，1厘米等于约37.8像素。

  margin: 2cm;
  

• mm（毫米）：用于印刷样式，1毫米等于约3.78像素。

  padding: 10mm;
  

• in（英寸）：用于印刷样式，1英寸等于96像素。

  font-size: 1in;
  

• pt（点）：印刷样式单位，1点等于1/72英寸，约为1.333像素。

  line-height: 12pt;
  

• pc（派卡）：印刷样式单位，1派卡等于12点。

  border-width: 2pc;
  

2. 相对单位

• %（百分比）：相对于包含块的尺寸，如父元素的宽度或高度。

  width: 50%;
  

• em：相对于当前元素的字体大小，1em等于当前字体的大小。

  font-size: 2em;
  

• rem：相对于根元素（<html>）的字体大小，1rem等于根元素的字体大小。

  margin: 1rem;
  

• vh（视口高度）：相对于视口的高度，1vh等于视口高度的1%。

  height: 50vh;
  

• vw（视口宽度）：相对于视口的宽度，1vw等于视口宽度的1%。

  width: 50vw;
  

• vmin：相对于视口的较小的宽度或高度，1vmin是 vw 和 vh 中较小的那个。

  font-size: 2vmin;
  

• vmax：相对于视口的较大的宽度或高度，1vmax是 vw 和 vh 中较大的那个。

  font-size: 2vmax;
  

• ch：相对于 0 字符的宽度（当前字体的数字 0 的宽度）。

  width: 10ch;
  

• ex：相对于当前字体的 x 高度。

  height: 5ex;
  

3. 动态单位

• auto：根据元素内容或布局自动计算尺寸。

  width: auto;
  

• min-content、max-content、fit-content：用于定义元素尺寸的最小、最大或适应内容的尺寸。

  width: min-content;
  

在 CSS 中实现三栏布局有多种方法，常见的包括使用 Flexbox、Grid、以及传统的浮动布局。每种方法都有其优缺点和适用场景。以下是三栏布局的常见实现方案：

1. Flexbox 布局

Flexbox 提供了一种简洁且灵活的方式来实现三栏布局，特别适合用于响应式设计。

示例代码

<div class="container">
  <div class="sidebar-left">左侧</div>
  <div class="main">中间</div>
  <div class="sidebar-right">右侧</div>
</div>

<style>
  .container {
    display: flex;
    justify-content: space-between;
  }
  .sidebar-left, .sidebar-right {
    flex: 0 0 200px; /* 固定宽度 */
  }
  .main {
    flex: 1; /* 自动填充剩余空间 */
  }
</style>

优点

• 简洁：非常容易理解和实现。
• 响应式：可以很方便地适配不同屏幕宽度。

缺点

• 宽度调整：需要根据内容调整各栏的宽度。

2. CSS Grid 布局

CSS Grid 是实现复杂布局的强大工具，非常适合实现三栏布局，支持更细粒度的控制。

示例代码

<div class="grid-container">
  <div class="sidebar-left">左侧</div>
  <div class="main">中间</div>
  <div class="sidebar-right">右侧</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 200px; /* 定义三列的宽度 */
    gap: 10px; /* 列间距 */
  }
  .sidebar-left, .sidebar-right {
    background-color: #f0f0f0;
  }
  .main {
    background-color: #e0e0e0;
  }
</style>

优点

• 强大：支持复杂布局和对齐，提供更强的布局控制。
• 响应式：可以轻松定义响应式布局。

缺点

• 兼容性：在老旧浏览器中的支持可能不如 Flexbox 完善（但现代浏览器都支持）。

3. 浮动布局

浮动布局是传统的布局方法，适合在老旧浏览器中使用，但相比于现代布局方法，代码较为复杂。

示例代码

<div class="container">
  <div class="sidebar-left">左侧</div>
  <div class="main">中间</div>
  <div class="sidebar-right">右侧</div>
</div>

<style>
  .container {
    overflow: hidden; /* 清除浮动 */
  }
  .sidebar-left, .sidebar-right {
    float: left;
    width: 200px; /* 固定宽度 */
  }
  .main {
    margin: 0 200px; /* 设置左右边距 */
  }
</style>

优点

• 兼容性：在非常老旧的浏览器中也能工作。

缺点

• 复杂性：需要清除浮动，代码维护较为繁琐。

4. 绝对定位布局

绝对定位可以用于实现复杂的布局，但需要手动计算和调整位置。

示例代码

<div class="container">
  <div class="sidebar-left">左侧</div>
  <div class="main">中间</div>
  <div class="sidebar-right">右侧</div>
</div>

<style>
  .container {
    position: relative;
    height: 100vh; /* 高度为视口高度 */
  }
  .sidebar-left, .sidebar-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px; /* 固定宽度 */
  }
  .sidebar-left {
    left: 0;
  }
  .sidebar-right {
    right: 0;
  }
  .main {
    position: absolute;
    left: 200px;
    right: 200px;
    top: 0;
    bottom: 0;
  }
</style>

优点

• 灵活性：可以创建复杂的布局和层叠效果。

缺点

• 维护：需要手动计算和调整，可能不如其他方法灵活和易用。

CSS 中的文档流（Document Flow），也称为标准流，是指浏览器如何按照 HTML 元素的结构和 CSS 样式规则来布局和呈现网页内容的过程。文档流决定了元素在页面上的位置和排列方式。文档流的主要特点和组成部分包括：

1. 主要布局模式

• 正常流（Normal Flow）：元素按照在 HTML 中的顺序逐个显示。块级元素（如 <div>, <p>）在页面上垂直堆叠，行内元素（如 <span>, <a>）在页面上水平排列。
• 浮动（Float）：当元素应用 float 属性后，它会从正常流中脱离，允许其他文本和行内元素围绕它排列。
• 定位（Positioning）：使用 position 属性（如 absolute, relative, fixed, sticky）时，元素会脱离正常流，根据其定位规则进行放置。
• 弹性盒布局（Flexbox）：通过 display: flex，元素成为弹性容器及其子元素成为弹性项，允许灵活地布局和对齐。
• 网格布局（Grid）：通过 display: grid，元素成为网格容器及其子元素成为网格项，提供了二维布局的能力。

2. 文档流中的元素类型

• 块级元素（Block-level Elements）：通常会从新行开始，占据父元素的整个宽度，如 <div>, <h1>, <p>。
• 行内元素（Inline Elements）：在同一行内显示，仅占据其内容的宽度，如 <span>, <a>, <img>。
• 块级行内元素（Block-level Inline Elements）：既有块级元素的特性又能在行内显示，如 <button>, <input>。

3. 影响文档流的 CSS 属性

• display：决定元素的显示类型（如 block, inline, flex, grid）。
• position：决定元素的定位方式（如 static, relative, absolute, fixed, sticky）。
• float：使元素脱离正常流并允许文本环绕。
• clear：用于控制浮动元素的清除，以避免元素重叠。

4. 文档流的影响

• 布局：文档流决定了元素的默认布局方式。块级元素会垂直堆叠，行内元素会水平排列。
• 重叠和排列：使用浮动和定位可以改变元素的排列顺序和位置，但这些元素不会占据正常文档流的位置。
• 响应式设计：通过调整文档流中的元素（如使用 Flexbox 或 Grid），可以实现响应式布局，适应不同的屏幕尺寸。

5. 示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      border: 1px solid black;
      padding: 10px;
    }
    .block {
      display: block;
      background-color: lightblue;
      margin-bottom: 10px;
    }
    .inline {
      display: inline;
      background-color: lightcoral;
    }
    .float {
      float: left;
      width: 100px;
      height: 100px;
      background-color: lightgreen;
      margin-right: 10px;
    }
    .absolute {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 100px;
      height: 100px;
      background-color: lightyellow;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="block">Block Element</div>
    <div class="inline">Inline Element</div>
    <div class="float">Floating Element</div>
    <div class="absolute">Absolute Positioning</div>
  </div>
</body>
</html>

在这个示例中：

• .block 元素按正常流的块级布局显示。
• .inline 元素在同一行内显示。
• .float 元素浮动到左侧，其他内容围绕它。
• .absolute 元素绝对定位，脱离了正常流。

在 CSS 中，BFC（Block Formatting Context）、IFC（Inline Formatting Context）、GFC（Grid Formatting Context）和 FFC（Flex Formatting Context）是几种格式化上下文，它们定义了元素如何在布局中被格式化和渲染。

1. Block Formatting Context (BFC)

• 定义：BFC 是一个独立的渲染区域，所有的块级盒子都在这个上下文中进行布局。它定义了块级元素的布局和定位规则。
• 特性：
  • 清除浮动：BFC 可以用于清除浮动元素带来的影响，因为 BFC 形成的区域不会被浮动元素影响。
  • 自适应高度：BFC 会计算自身的高度以包裹包含的内容，确保包含块的高度能根据内容变化而调整。
  • 边距折叠：垂直方向上，BFC 中相邻的块级元素的边距不会折叠到 BFC 的外部。
• 触发 BFC 的情况：
  • 根元素
  • display: flow-root（用于创建新的 BFC）
  • position: absolute 或 position: fixed
  • float（左或右）
  • overflow 的值为 hidden, auto, 或 scroll
  • display: table（table, inline-table）

2. Inline Formatting Context (IFC)

• 定义：IFC 是处理内联元素（如 <span>、<a>）的上下文。它定义了这些元素如何在一行中进行布局。
• 特性：
  • 水平排列：在 IFC 中，内联元素按水平顺序排列，直到当前行的宽度被填满。
  • 高度自适应：内联元素的高度由内容决定，不会影响周围元素的高度。
  • 不影响其他行：内联元素不会影响其他行的布局，行内元素会在行中水平排列。

3. Grid Formatting Context (GFC)

• 定义：GFC 是在使用 CSS Grid 布局时创建的上下文。它定义了如何在网格容器内布局网格项。
• 特性：
  • 网格布局：在 GFC 中，元素会按照定义的网格行和列进行布局。
  • 完全控制：通过 CSS Grid，开发者可以完全控制网格项的位置和大小。
  • 网格线：GFC 允许开发者定义网格线，从而精确控制布局。

4. Flex Formatting Context (FFC)

• 定义：FFC 是在使用 CSS Flexbox 布局时创建的上下文。它定义了如何在弹性容器内布局弹性项。
• 特性：
  • 弹性布局：在 FFC 中，元素会根据 Flexbox 属性（如 flex-direction, justify-content, align-items）进行弹性布局。
  • 方向控制：开发者可以控制主轴和交叉轴上的对齐方式。
  • 自适应布局：FPC 允许弹性项根据容器大小自动调整自身的大小和排列方式。

CSS 伪类和伪元素用于选择和样式化 DOM 元素的特定状态或部分。它们有不同的作用和用法。以下是它们的区别、常见类型及实际应用：

CSS 伪类

伪类用于选择元素的特定状态或特性。例如：

1. :hover - 选择当鼠标悬停在元素上时的状态。

   a:hover {
     color: red;
   }
   

2. :focus - 选择当元素获得焦点时的状态，通常用于输入框。

   input:focus {
     border-color: blue;
   }
   

3. :nth-child(n) - 选择父元素中第 n 个子元素。

   li:nth-child(2) {
     color: green;
   }
   

4. :first-child - 选择父元素中的第一个子元素。

   p:first-child {
     font-weight: bold;
   }
   

5. :last-child - 选择父元素中的最后一个子元素。

   p:last-child {
     margin-bottom: 0;
   }
   

6. :not(selector) - 选择不匹配指定选择器的元素。

   div:not(.active) {
     opacity: 0.5;
   }
   

7. :checked - 选择已选中的输入框（如复选框、单选框）。

   input:checked {
     background-color: yellow;
   }
   

CSS 伪元素

伪元素用于选择元素的特定部分，通常创建新的元素内容。例如：

1. ::before - 在元素的内容之前插入内容。

   p::before {
     content: "Note: ";
     font-weight: bold;
   }
   

2. ::after - 在元素的内容之后插入内容。

   p::after {
     content: " [end]";
     color: gray;
   }
   

3. ::first-line - 选择元素的第一行文本。

   p::first-line {
     font-weight: bold;
   }
   

4. ::first-letter - 选择元素的第一个字母。

   p::first-letter {
     font-size: 2em;
   }
   

区别

• 伪类：选择元素的状态或结构特征。伪类的选择器是 :pseudo-class，如 :hover、:focus。伪类主要用于根据用户交互或元素在文档中的位置来改变样式。

• 伪元素：选择元素的特定部分或添加新的内容。伪元素的选择器是 ::pseudo-element，如 ::before、::after。伪元素主要用于插入额外的样式或内容到元素的特定位置。

实际应用

• 伪类应用：

  • :hover：用于在用户将鼠标悬停在元素上时改变样式，常用于按钮和链接。
  • :nth-child()：用于选中具有特定位置的子元素，常用于条目列表和表格行的样式。

• 伪元素应用：

  • ::before 和 ::after：用于在元素前后插入内容，常用于图标、装饰性文本等。
  • ::first-line 和 ::first-letter：用于对文本的首行或首字母应用样式，常用于排版和设计效果。

PostCSS 是一个基于 Node.js 的工具，用于处理 CSS 文件。它本质上是一个 CSS 解析器和转换器，通过插件机制，可以在构建过程中对 CSS 进行各种优化和扩展。

主要作用和功能

1. CSS 预处理：

   • PostCSS 可以用作 CSS 预处理器，支持嵌套规则、变量、混合等功能，类似于 Sass 或 LESS。通过插件，如 postcss-nested（支持嵌套）和 postcss-simple-vars（支持变量），可以在 CSS 中使用这些高级功能。

2. 自动添加浏览器前缀：

   • PostCSS 可以自动为 CSS 属性添加浏览器前缀，以确保兼容性。插件 Autoprefixer 是最常用的插件之一，它基于 Can I Use 数据库来判断需要添加哪些前缀，从而减少手动添加前缀的繁琐操作。

3. 优化和压缩：

   • PostCSS 还可以用于优化和压缩 CSS 代码，减少文件大小。通过插件，如 cssnano，可以自动去除不必要的空格、注释，并合并相同的选择器规则，生成更小的 CSS 文件。

4. 未来 CSS 功能的支持：

   • PostCSS 通过插件可以提前使用一些未来 CSS 规范中的功能，即使这些功能还未被广泛支持。例如，postcss-preset-env 插件允许开发者使用未来的 CSS 语法，然后根据目标浏览器的支持情况自动进行相应的转换。

5. CSS Linting：

   • PostCSS 可以用于代码风格的检查和格式化。通过插件，如 stylelint，可以按照团队的编码规范自动检测和修正 CSS 中的不合规写法。

6. 自定义插件：

   • PostCSS 的强大之处在于其灵活的插件机制，开发者可以编写自己的插件来实现特定的 CSS 转换需求。例如，处理特定的公司风格指南、动态生成样式等。

工作原理

PostCSS 的工作流程通常包括以下步骤：

1. 解析：首先，PostCSS 将 CSS 源代码解析为抽象语法树（AST）。
2. 转换：然后，PostCSS 会通过插件对 AST 进行各种转换。
3. 生成：最后，PostCSS 将转换后的 AST 重新生成 CSS 代码。

示例代码

使用 PostCSS 自动添加浏览器前缀的示例：

// 安装 PostCSS 和 Autoprefixer
// npm install postcss autoprefixer

const postcss = require('postcss');
const autoprefixer = require('autoprefixer');

const css = `
  .example {
    display: flex;
    transition: transform 1s;
  }
`;

postcss([autoprefixer])
  .process(css, { from: undefined })
  .then(result => {
    console.log(result.css);
  });

在 HTML 元素上，多个 class 名称的样式渲染优先级（或称为特指度）是由 CSS 的特指度计算规则决定的。具体来说，CSS 选择器的优先级是由以下几个部分组成的：

特指度计算规则

1. ID 选择器（如 #header）：特指度最高。
2. 类选择器（如 .menu）、属性选择器（如 [type="text"]）和伪类选择器（如 :hover）：特指度次之。
3. 元素选择器（如 div）和伪元素选择器（如 ::before）：特指度最低。
4. 通配符选择器（如 *）、组合器（如 >、+）和伪类（如 :not()）的特指度通常较低。

计算多个 class 的优先级

当一个元素上有多个 class 名称时，每个 class 名称的样式规则都会应用到该元素。若多个 class 选择器定义了相同的 CSS 属性，浏览器会按照以下规则决定哪个样式优先应用：

1. 特指度：在多个 class 选择器的情况下，优先应用特指度更高的规则。例如，.class1 和 .class2 的特指度相同，那么后定义的样式会覆盖先定义的样式。

2. 样式表的顺序：如果多个样式规则的特指度相同，那么后定义的规则会覆盖先定义的规则。例如，如果 CSS 文件中 .menu { color: red; } 在 .header { color: blue; } 之后，那么 .menu 的样式会被应用。

3. 内联样式：内联样式（即 style 属性中的样式）具有比外部样式表更高的特指度。如果元素上有内联样式，它们会覆盖 class 中定义的样式。

4. !important 声明：如果 CSS 属性使用了 !important，它将具有最高的优先级，覆盖所有其他没有 !important 的规则。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class Priority Example</title>
    <style>
        .class1 {
            color: red;
        }
        .class2 {
            color: blue;
        }
        .class1.class2 {
            color: green;
        }
    </style>
</head>
<body>
    <div class="class1 class2">This text will be green.</div>
</body>
</html>

在这个例子中，<div> 元素同时应用了 .class1 和 .class2，并且 .class1.class2 的选择器具有更高的特指度，因此 color 属性设置为 green。

避免全局样式污染是确保 CSS 样式可维护、可复用且不会意外影响其他部分的关键。以下是一些常见的方法和最佳实践：

1. 使用 CSS 模块

• CSS Modules：每个 CSS 文件只对其作用的组件生效，样式局部化，避免全局污染。例如，在使用 CSS Modules 的项目中，样式只会影响导入了该模块的组件。

2. 使用命名空间

• 命名空间：为类名添加前缀，或使用更具描述性的命名空间，避免类名冲突。例如，使用 Button__primary 而不是 .primary。

3. CSS-in-JS

• CSS-in-JS：使用如 styled-components 或 emotion 这样的库将 CSS 和 JavaScript 结合，样式与组件绑定，不会全局污染。

4. Scoped CSS

• Scoped Styles：在 Vue.js 等框架中，使用 <style scoped> 将样式限制在组件内部，只影响当前组件的 DOM 元素。

5. BEM 方法论

• BEM（Block Element Modifier）：遵循 BEM 方法论编写 CSS 类名，使类名具有更高的特异性，避免样式冲突。例如，.block__element--modifier。

6. CSS 预处理器

• CSS 预处理器：使用 Sass、Less 等预处理器来组织样式，通过嵌套、变量和混合宏提高样式管理能力，减少全局样式污染。

7. 避免通配符选择器

• 限制通配符选择器使用：避免使用 * 选择器，这会影响所有元素，增加样式污染的风险。

8. 使用 CSS 变量

• CSS Variables：通过定义 CSS 变量（自定义属性），确保样式在组件中可控，并减少全局样式的影响。

9. 合理使用继承

• 继承：尽量避免深层次的样式继承。使用明确的选择器来减少继承的副作用。

10. 分离结构与样式

• 分离结构与样式：尽量将结构和样式分离，保持 CSS 文件的简洁和模块化。

示例：CSS Modules

// Button.module.css
.button {
  background-color: blue;
  color: white;
}

// Button.js
import React from 'react';
import styles from './Button.module.css';

const Button = () => (
  <button className={styles.button}>Click me</button>
);

export default Button;

在前端开发过程中，有几种常见的方法可以解决全局样式命名冲突和样式覆盖问题：

1. 使用命名空间（Namespacing）：给样式类名添加前缀或命名空间，以确保每个组件的样式类名不会冲突。例如，在一个项目中，可以为每个组件的样式类名都添加一个唯一的前缀，例如.componentA-button和.componentB-button，这样可以避免命名冲突。

2. 使用BEM命名规范：BEM（块、元素、修饰符）是一种常用的命名规范，可以将样式类名分成块（block）、元素（element）和修饰符（modifier）三个部分，以确保样式的唯一性和可读性。例如，.button表示一个块，.button__icon表示一个元素，.button--disabled表示一个修饰符。

3. 使用CSS预处理器：CSS预处理器（如Sass、Less）可以提供变量、嵌套规则和模块化等功能，可以更方便地管理样式并避免命名冲突。例如，可以使用变量来定义颜色和尺寸，使用嵌套规则来组织样式，并将样式拆分成多个模块。

4. 使用CSS模块：CSS模块提供了在组件级别上限定样式作用域的能力，从而避免了全局样式的冲突和覆盖。每个组件的样式定义在组件内部，使用唯一的类名，确保样式的隔离性和唯一性。

5. 使用CSS-in-JS解决方案：CSS-in-JS是一种将CSS样式直接写入JavaScript代码中的方法，通过将样式与组件绑定，可以避免全局样式的冲突问题。一些常见的CSS-in-JS解决方案包括Styled Components、Emotion和CSS Modules with React等。

CSS Modules 是一种用于组织和管理 CSS 的技术。它通过在编译时为每个 CSS 类名生成唯一的标识符，并将它们作为 JavaScript 对象的属性导出。这样，可以确保每个类名在整个应用程序中的唯一性，避免样式冲突。

使用 CSS Modules，可以将 CSS 文件与组件文件绑定在一起，这样每个组件都有自己的 CSS 作用域，样式只会应用于特定的组件，不会影响其他组件。这种隔离性和局部作用域有助于降低样式冲突和维护 CSS 的复杂性。

CSS Modules 还提供了一些其他功能，例如:

1. 局部作用域: CSS Modules 允许在组件中定义局部样式，这些样式仅适用于该组件。这样，可以避免全局样式造成的副作用，并使组件更加可重用。

2. 类名和样式的映射: 使用 CSS Modules，可以通过导入生成的样式对象，将类名映射到组件中的类名，并将其应用于相应的元素。这样可以方便地将样式与组件关联起来，并跟踪样式的变化。

3. 继承和组合: CSS Modules 支持继承和组合样式。可以通过使用类名组合和继承规则，将多个样式应用于同一个元素或组件。

总结来说，CSS Modules 提供了一种更可靠和可维护的方式来管理 CSS，通过实现局部作用域和唯一类名标识符，帮助开发者避免样式冲突和提高样式的可重用性。

calc() 是 CSS 中一个非常强大的函数，它允许你在 CSS 样式中进行动态的数学计算，从而为某些属性的值提供更大的灵活性。calc() 函数可以执行加法、减法、乘法和除法操作，能够基于已知的值（如百分比、像素、em、rem 等）进行计算，计算结果会动态应用到元素的样式中。

基本语法

property: calc(expression);

其中，expression 是一个数学表达式，可以包含数值、运算符和单位。

支持的运算符

• 加法 (+)：将两个值相加。
• 减法 (-)：从第一个值中减去第二个值。
• 乘法 (*)：将一个值与另一个值相乘。
• 除法 (/)：将一个值除以另一个值。

使用场景

calc() 可以在很多情况下派上用场，特别是在需要混合不同单位或需要响应式布局时，它能够根据不同的条件灵活调整元素的尺寸或位置。

常见的使用场景

1. 响应式布局 calc() 可以帮助你创建响应式的布局，动态调整元素的宽度或高度，使布局在不同的视口宽度下更加灵活。

   .container {
     width: calc(100% - 40px); /* 宽度为 100% 减去 40px 的边距 */
   }
   

2. 定位元素 使用 calc() 来动态计算元素的位置，特别是在绝对定位的情况下，根据父元素的宽度和高度来设置元素的 top、left、right 或 bottom。

   .box {
     position: absolute;
     top: calc(50% - 10px); /* 将元素垂直居中 */
   }
   

3. 结合百分比和固定值 有时你可能需要将百分比和固定单位混合使用（例如，百分比加像素），calc() 就可以处理这种需求。

   .element {
     width: calc(50% - 20px); /* 使元素宽度为 50% 减去 20px */
   }
   

4. 动态计算字体大小或间距 你可以使用 calc() 来根据父元素的大小动态计算字体大小、内外边距等。

   .header {
     font-size: calc(1rem + 2vw); /* 字体大小随着视口宽度的变化而动态调整 */
   }
   

注意事项

1. 空格要求：在 calc() 函数中，操作符（如 +、-、* 和 /）两边必须有空格，否则会导致语法错误。

   /* 正确 */
   width: calc(100% - 20px);
   
   /* 错误 */
   width: calc(100%-20px); /* 缺少空格 */
   

2. 单位的混合使用：calc() 允许在一个表达式中混合不同的单位（如百分比和像素），但请注意，乘法和除法操作时只能保持单位一致。例如：

   • calc(100% - 50px) 是合法的。
   • calc(100% * 2) 是不合法的，因为 % 不能直接与数字进行乘法运算。

3. 性能问题：calc() 的计算会在每次渲染时动态计算，虽然现代浏览器优化了这个过程，但在复杂布局和大量元素中，还是有一定的性能开销。因此，尽量避免在性能敏感的场景下过度使用 calc()。

可以使用 CSS 的 background-image 属性，并配合 linear-gradient 或 radial-gradient 来实现渐变效果。

1. 线性渐变（linear-gradient）

linear-gradient 用于创建沿直线方向的渐变，可以设置渐变的角度或方向。

示例：

/* 从上到下的线性渐变 */
.element {
  background-image: linear-gradient(to bottom, red, yellow);
}

/* 从左上到右下的线性渐变 */
.element {
  background-image: linear-gradient(to bottom right, red, yellow);
}

/* 角度为45度的线性渐变 */
.element {
  background-image: linear-gradient(45deg, red, yellow);
}

• to bottom 或 to top：定义渐变的方向。
• 45deg：表示渐变的角度。

结果：

• linear-gradient(to bottom, red, yellow) 会创建从红色到黄色的垂直渐变。
• linear-gradient(to bottom right, red, yellow) 会创建从红色到黄色的对角线渐变。

2. 径向渐变（radial-gradient）

radial-gradient 用于创建从中心向外扩展的渐变效果。

示例：

/* 圆形渐变，默认从中心向外 */
.element {
  background-image: radial-gradient(circle, red, yellow);
}

/* 椭圆形渐变 */
.element {
  background-image: radial-gradient(ellipse, red, yellow);
}

/* 设置渐变的起始位置 */
.element {
  background-image: radial-gradient(circle at top left, red, yellow);
}

• circle：表示渐变为圆形。
• ellipse：表示渐变为椭圆形。
• at top left：表示渐变的中心从元素的左上角开始。

结果：

• radial-gradient(circle, red, yellow) 会创建从中心到外部的圆形渐变。
• radial-gradient(ellipse, red, yellow) 会创建一个椭圆形的渐变。

3. 多重颜色渐变

还可以在渐变中使用多个颜色，实现更复杂的效果。

示例：

.element {
  background-image: linear-gradient(to right, red, orange, yellow, green);
}

结果：

这将创建一个从红色到橙色，再到黄色和绿色的渐变。

4. 透明度渐变

渐变色可以同时处理颜色和透明度，可以使用 RGBA 或 HSLA 来实现渐变的透明效果。

示例：

.element {
  background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

结果：

这会创建一个从透明红色到不透明红色的渐变。

在 LESS 中，可以使用函数来进行各种操作，例如数学运算、颜色操作、字符串操作等。LESS 提供了一些内置的函数，可以帮助我们在样式表中动态计算、转换和修改值。还可以自定义函数来完成特定的计算或操作。

1. 内置函数

数学函数

LESS 提供了常见的数学运算函数，比如加、减、乘、除等：

@base: 10;
@result: @base + 5; // 15

@width: 50px;
@height: 100px;
@area: @width * @height; // 5000px

颜色操作

LESS 提供了许多用于操作颜色的函数，可以调整颜色的亮度、饱和度、透明度等：

• darken($color, $amount)：使颜色变暗
• lighten($color, $amount)：使颜色变亮
• saturate($color, $amount)：增加颜色的饱和度
• desaturate($color, $amount)：减少颜色的饱和度
• adjust-hue($color, $degrees)：调整颜色的色相
• rgba($color, $alpha)：为颜色添加透明度

@color: #00bcd4;

@lightColor: lighten(@color, 10%); // 更亮的颜色
@darkColor: darken(@color, 10%);   // 更暗的颜色
@semiTransparent: rgba(@color, 0.5); // 半透明的颜色

字符串操作

LESS 还提供了一些用于字符串处理的函数：

• unit($value)：返回值的单位
• str-length($string)：返回字符串的长度
• str-index($string, $substring)：返回子字符串的位置
• to-upper-case($string)：将字符串转换为大写
• to-lower-case($string)：将字符串转换为小写

@string: "Hello, LESS!";
@stringLength: str-length(@string); // 12

@upper: to-upper-case(@string); // "HELLO, LESS!"
@lower: to-lower-case(@string); // "hello, less!"

媒体查询操作

LESS 提供了内置的 media() 函数来定义响应式设计中的媒体查询：

@breakpoint: 768px;

@media-query: media(max-width: @breakpoint);

2. 自定义函数

你也可以在 LESS 中定义自己的函数（Mixin），通过参数传递来实现一些动态的样式计算。自定义函数通常用于计算一些动态的值或者重复的样式逻辑。

示例：自定义 Mixin 函数

// 定义一个计算圆角的函数
.rounded(@radius) {
  border-radius: @radius;
}

// 使用该函数
.button {
  .rounded(5px); // 设置圆角为 5px
}

示例：根据不同的值返回不同的颜色

// 定义一个自定义的颜色选择函数
.chooseColor(@color) {
  @selectedColor: @color == "primary" ? #3498db :
                  @color == "secondary" ? #2ecc71 :
                  #e74c3c; // 默认红色
  color: @selectedColor;
}

// 使用该函数
.button {
  .chooseColor("primary");  // 使用主色
}

示例：计算动态的值

// 定义一个动态计算的函数
.calculatePadding(@padding) {
  padding: @padding * 2; // 将传入的 padding 值翻倍
}

// 使用该函数
.container {
  .calculatePadding(10px); // padding 为 20px
}

3. 函数与条件语句

LESS 支持使用 @variable 作为函数的参数，并结合条件语句来动态生成值：

@font-size: 16px;

.getFontSize(@size) {
  @calculated-size: @size > 20px ? @size : 20px;
  font-size: @calculated-size;
}

.button {
  .getFontSize(@font-size); // 如果 @font-size 小于 20px，则使用 20px
}

4. 函数的作用域

在 LESS 中，函数的作用域是局部的，函数内部的变量不会影响外部环境，函数的参数和局部变量只在函数内部有效。

总结

可以使用 3D 变换（transform: rotateY） + **过渡动画（transition）**实现。

下面的例子，可以通过 hover 实现控制水平翻转：

<div class="card">
  <div class="card-inner">
    <div class="card-front">Front</div>
    <div class="card-back">Back</div>
  </div>
</div>

.card {
  width: 200px;
  height: 300px;
  perspective: 1000px; /* 创建 3D 视角 */
}

.card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

/* 触发翻转效果 */
.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.card-front {
  background: #fff;
  color: #000;
}

.card-back {
  background: #333;
  color: #fff;
  transform: rotateY(180deg);
}

如果需要 上下翻转，只需将 rotateY 改为 rotateX 即可。

在 CSS 中，animation、transition 和 transform 是用来创建动画效果的关键属性，它们各自具有不同的作用和特点。

1. animation：

   • animation 属性允许创建一个在指定时间内播放的动画效果，可以包括多个关键帧。
   • 通过指定关键帧动画的名称、持续时间、动画方式（timing function）、延迟时间、播放次数等来控制动画的效果。
   • animation 属性可以实现更复杂的动画效果，例如循环动画、无限次播放等。

2. transition：

   • transition 属性用于指定在元素状态改变时，要以何种方式过渡到新状态。
   • 通过指定过渡的属性、持续时间、动画方式（timing function）、延迟时间等来控制过渡效果。
   • transition 属性适用于元素从一种状态平滑过渡到另一种状态，例如颜色、大小、位置等属性的变化。

3. transform：

   • transform 属性用于对元素进行变形，例如平移、旋转、缩放、倾斜等。
   • 通过 transform 属性，可以改变元素的变形属性来创建动画效果。
   • transform 属性通常与 transition 或 animation 结合使用，使得变形动画更加平滑。

总结：

• animation 属性用于创建复杂的动画序列
• transition 属性用于在状态变化时平滑过渡
• transform 属性用于对元素进行变形

这三种属性通常结合使用，以实现丰富的动画效果。

可以使用order属性来改变Flex布局下元素的顺序。order属性指定了Flex容器内部各个项目的排列顺序，其默认值为0。

通过调整order属性的值，可以改变元素的顺序。具体步骤如下：

1. 将元素定义为Flex容器，使用display: flex;或者display: inline-flex;。
2. 为每个子元素设置order属性，根据需要设置不同的值，值越小的元素会在前面，值相等的元素按照文档流原始顺序排列。

以下是一个示例代码：

<div class="flex-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
</div>

.flex-container {
  display: flex;
}

.item-2 {
  order: 2; /* 改变顺序 */
}

在上述代码中，通过将第二个子元素的order属性设置为2，可以将其放置在其他子元素之后。

请注意，order属性接受任意整数值，负数也可以使用。同时，当多个元素的order值相同时，它们会按照它们在文档流中的位置进行排序。

flex 是复合属性，是flex-grow,flex-shrink 和 flex-basis的简写，默认值为0 1 auto，后两个属性可选。

• flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间也不放大
• flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
• flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（相当于我们设置的width）

而 flex: auto; 是 flex:1 1 auto; 的简写，即元素尺寸可以弹性增大，也可以弹性变小，具有十足的弹性，但在尺寸不足时会优先最大化内容尺寸。

再介绍下使用场景：

当希望元素充分利用剩余空间，但是各自的尺寸按照各自内容进行分配的时候，适合使用 flex:auto。

flex:auto 多用于内容固定，或者内容可控的布局场景，例如导航数量不固定，每个导航文字数量也不固定的导航效果就适合使用 flex:auto 效果来实现，

object-fit

object-fit CSS 属性指定可替换元素（例如：<img> 或 <video>）的内容应该如何适应到其使用高度和宽度确定的框。

你可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。

语法

object-fit: contain; 
object-fit: cover; 
object-fit: fill; 
object-fit: none; 
object-fit: scale-down; /* Global values */ 
object-fit: inherit; 
object-fit: initial; 
object-fit: revert; 
object-fit: revert-layer; 
object-fit: unset; 

object-fit 属性由下列的值中的单独一个关键字来指定。

contain

被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。

cover

被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。

fill

被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。

none

被替换的内容将保持其原有的尺寸。

scale-down

内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

在 CSS3 中，transition 和 animation 是两种用于实现动画效果的属性。它们分别用于不同的动画需求和实现方式。

Transition 属性：

transition 属性用于定义元素在状态改变时从一个样式转换到另一个样式的过渡效果。它包含以下几个属性：

• transition-property：指定过渡效果应用的 CSS 属性名称，多个属性可以用逗号分隔。
• transition-duration：指定过渡效果的持续时间，单位可以是秒(s)或毫秒(ms)。
• transition-timing-function：指定过渡效果的时间曲线，也就是过渡的速度变化函数。
• transition-delay：指定过渡效果开始之前的延迟时间，单位可以是秒(s)或毫秒(ms)。

示例：

/* 定义一个简单的过渡效果 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s ease-in-out;
}

.box:hover {
  width: 200px;
}

在上面的示例中，当鼠标悬停在 .box 元素上时，宽度从 100px 过渡到 200px，过渡持续时间为 1 秒，过渡速度为 ease-in-out。

Animation 属性：

animation 属性用于定义复杂的动画效果，可以自定义关键帧（keyframes）来实现更复杂的动画效果。它包含以下几个属性：

• animation-name：指定定义动画的关键帧名称。
• animation-duration：指定动画的持续时间，单位可以是秒(s)或毫秒(ms)。
• animation-timing-function：指定动画的时间曲线，也就是动画的速度变化函数。
• animation-delay：指定动画开始之前的延迟时间，单位可以是秒(s)或毫秒(ms)。
• animation-iteration-count：指定动画的重复次数，可以使用一个整数值或 infinite（表示无限循环）。
• animation-direction：指定动画的播放方向，可以是 normal（默认），reverse（反向播放），alternate（正向再反向循环），或 alternate-reverse（反向再正向循环）。
• animation-fill-mode：指定动画在非运行时的样式，可以是 none（默认），forwards（保持最后一帧的样式），backwards（应用第一帧的样式），或 both（同时应用第一帧和最后一帧的样式）。
• animation-play-state：指定动画的播放状态，可以是 running（默认，动画正在播放）或 paused（动画暂停）。

示例：

/* 定义一个简单的动画 */
@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: slide-in 1s ease-in-out infinite alternate;
}

在上面的示例中，.box 元素会应用一个名为 slide-in 的动画，从左侧滑动进入容器，动画持续时间为 1 秒，以 ease-in-out 时间曲线播放，无限循环，并且往返运动。

CSS 发展

我们在书写 css 的时候其实经历了以下几个阶段：

• 手写原生 CSS
• 使用预处理器 Sass/Less
• 使用后处理器 PostCSS
• 使用 css modules
• 使用 css in js

手写原生 CSS

在我们最初学习写页面的时候，大家都学过怎么去写 css，也就以下几种情况：

• 行内样式，即直接在 html 中的 style 属性里编写 css 代码。
• 内嵌样式，即在 html h 中的 style 标签内编写 class，提供给当前页面使用。
• 导入样式，即在内联样式中 通过 @import 方法，导入其他样式，提供给当前页面使用。
• 外部样式，即使用 html 中的 link 标签，加载样式，提供给当前页面使用。

我们在不断摸索中，逐渐形成了以编写内嵌样式和外部样式为主要的编写习惯。

读到这里大家肯定有所疑问，为什么不建议使用行内样式？

使用行内样式的缺点

• 样式不能复用。
• 样式权重太高，样式不好覆盖。
• 表现层与结构层没有分离。
• 不能进行缓存，影响加载效率。

然后我们继续剖析一下，为什么不建议使用导入样式？

经测试，在 css 中使用 @import 会有以下两种情况：

1、在 IE6-8 下，@import 声明指向的样式表并不会与页面其他资源并发加载，而是等页面所有资源加载完成后才开始下载。

2、如果在 link 标签中去 @import 其他 css，页面会等到所有资源加载完成后，才开始解析 link 标签中 @import 的 css。

使用导入样式的缺点

• 导入样式，只能放在 style 标签的第一行，放其他行则会无效。
• @import 声明的样式表不能充分利用浏览器并发请求资源的行为，其加载行为往往会延后触发或被其他资源加载挂起。
• 由于 @import 样式表的延后加载，可能会导致页面样式闪烁。

使用预处理器 Sass/Less

随着时间的不断发展，我们逐渐发现，编写源生的 css 其实并不友好，例如：源生的 css 不支持变量，不支持嵌套，不支持父选择器等等，这些种种问题，催生出了像 sass/less 这样的预处理器。

预处理器主要是强化了 css 的语法，弥补了上文说了这些问题，但本质上，打包出来的结果和源生的 css 都是一样的，只是对开发者友好，写起来更顺滑。

后处理器 PostCSS

随着前端工程化的不断发展，越来越多的工具被前端大佬们开发出来，愿景是把所有的重复性的工作都交给机器去做，在 css 领域就产生了 postcss。

postcss 可以称作为 css 界的 babel，它的实现原理是通过 ast 去分析我们的 css 代码，然后将分析的结果进行处理，从而衍生出了许多种处理 css 的使用场景。

常用的 postcss 使用场景有：

• 配合 stylelint 校验 css 语法
• 自动增加浏览器前缀 autoprefixer
• 编译 css next 的语法

CSS 模块化迅速发展

随着 react、vue 等基于模块化的框架的普及使用，我们编写源生 css 的机会也越来越少。我们常常将页面拆分成许多个小组件，然后像搭积木一样将多个小组件组成最终呈现的页面。

但是我们知道，css 是根据类名去匹配元素的，如果有两个组件使用了一个相同的类名，后者就会把前者的样式给覆盖掉，看来解决样式命名的冲突是个大问题。

为了解决这个问题，产生出了 CSS 模块化的概念。

CSS 模块化定义

• 你是否为 class 命名而感到苦恼？
• 你是否有怕跟别人使用同样 class 名而感到担忧？
• 你是否因层级结构不清晰而感到烦躁？
• 你是否因代码难以复用而感到不爽？
• 你是否因为 common.css 的庞大而感到恐惧？

你如果遇到如上问题，那么就很有必要使用 css 模块化。

CSS 模块化的实现方式

BEM 命名规范

BEM 的意思就是块（block）、元素（element）、修饰符（modifier）。是由 Yandex 团队提出的一种前端命名方法论。这种巧妙的命名方法让你的 css 类对其他开发者来说更加透明而且更有意义。

BEM 的命名规范如下：

/* 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。 */
.block {
}

/* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。 */
.block__element {
}

/* 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观 */
.block--modifier {
}复制代码

通过 bem 的命名方式，可以让我们的 css 代码层次结构清晰，通过严格的命名也可以解决命名冲突的问题，但也不能完全避免，毕竟只是一个命名约束，不按规范写照样能运行。

CSS Modules

CSS Modules 指的是我们像 import js 一样去引入我们的 css 代码，代码中的每一个类名都是引入对象的一个属性，通过这种方式，即可在使用时明确指定所引用的 css 样式。

并且 CSS Modules 在打包的时候会自动将类名转换成 hash 值，完全杜绝 css 类名冲突的问题。

使用方式如下：

1、定义 css 文件。

.className {
  color: green;
}
/* 编写全局样式 */
:global(.className) {
  color: red;
}

/* 样式复用 */
.otherClassName {
  composes: className;
  color: yellow;
}

.otherClassName {
  composes: className from "./style.css";
}

2、在 js 模块中导入 css 文件。

import styles from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

3、配置 css-loader 打包。

CSS Modules 不能直接使用，而是需要进行打包，一般通过配置 css-loader 中的 modules 属性即可完成 css modules 的配置。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use:{
          loader: 'css-loader',
          options: {
            modules: {
              // 自定义 hash 名称
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            }
          }
       }
    ]
  }
};

4、最终打包出来的 css 类名就是由一长串 hash 值生成。

._2DHwuiHWMnKTOYG45T0x34 {
  color: red;
}

._10B-buq6_BEOTOl9urIjf8 {
  background-color: blue;
}

CSS In JS

CSS in JS，意思就是使用 js 语言写 css，完全不需要些单独的 css 文件，所有的 css 代码全部放在组件内部，以实现 css 的模块化。

CSS in JS 其实是一种编写思想，目前已经有超过 40 多种方案的实现，最出名的是 styled-components。

使用方式如下：

import React from "react";
import styled from "styled-components";

// 创建一个带样式的 h1 标签
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// 创建一个带样式的 section 标签
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// 通过属性动态定义样式
const Button = styled.button`
  background: ${props => (props.primary ? "palevioletred" : "white")};
  color: ${props => (props.primary ? "white" : "palevioletred")};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// 样式复用
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
  <Button primary>Primary</Button>
</Wrapper>;

可以看到，我们直接在 js 中编写 css，案例中在定义源生 html 时就创建好了样式，在使用的时候就可以渲染出带样式的组件了。

除此之外，还有其他比较出名的库：

• emotion
• radium
• glamorous

总结

最后放一张总结好的图。

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等

伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after

后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类

由于低版本 IE 对双冒号不兼容，开发者为了兼容性各浏览器，可以继续使用 :after 这种老语法表示伪元素

• 单冒号（:）用于 css3 的伪类
• 双冒号（::）用于 css3 的伪元素

作用：::before 和 ::after 的主要作用是在元素内容前后加上指定内容。

另外，伪类与伪元素的区别有：

• 伪类与伪元素都是用于向选择器加特殊效果
• 伪类与伪元素的本质区别就是是否抽象创造了新元素
• 伪类只要不是互斥可以叠加使用
• 伪元素在一个选择器中只能出现一次，并且只能出现在末尾
• 伪类与伪元素优先级分别与类、标签优先级相同

不一定。

position:fixed;的元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置，元素的位置在屏幕滚动时不会改变。fixed 属性会创建新的层叠上下文。

当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

说起两端对齐，大家首先想到的可能是 text-align: justify;，但justify对最后一行无效。

通常这样的排版对整段文字是极好的，我们并不希望当最后一行只有两个字时也两端对齐，毕竟这是不便于阅读的，那么当我们只有一行文本，但要实现单行文本两端对齐怎么解决？

方法一：添加一行

根据justify对最后一行无效，我们可以新增一行，使该行文本不是最后一行，实现如下：

//html
<div class="item">
    <span class="label" >{{item.label}}</span>：
    <span class="value">{{item.value}}</span>
</div>

//scss
.item {
    height: 32px;
    line-height: 32px;
    margin-bottom: 8px;
    .label {
        display: inline-block;
        height: 100%;
        width: 100px;
        text-align: justify;
        vertical-align: top;
        &::after {
            display: inline-block;
            width: 100%;
            content: '';
            height: 0;
        }
    }
    .value {
        padding-right: 10px;
    }
}

方法二： text-align-last

text-align-last，该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。

//scss
.item {
    margin-bottom: 8px;
    .label {
        display: inline-block;
        height: 100%;
        min-width: 100px;
        text-align: justify;
        text-align-last: justify;
    }
    .value {
        padding-right: 10px;
    }
}

现在的浏览器基本都支持该属性。

想要实现CSS动画的无限循环，其实主要就是要使用animation-iteration-count这个属性，将其设置为infinite，动画就会一直循环播放。

例如：

<image class="anima" mode="widthFix" @click="nav" src="@/static/1_btn.png"></image>

.anima {
  animation-name: likes; // 动画名称
  animation-direction: alternate; // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
  animation-timing-function: linear; // 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束；
  animation-delay: 0s; // 动画延迟时间
  animation-iteration-count: infinite; //  动画播放次数，infinite：一直播放
  animation-duration: 1s; // 动画完成时间
}

@keyframes likes {
  0%{
    transform: scale(1);
  }
  25%{
    transform: scale(0.9);
  }
  50%{
    transform: scale(0.85);
  }
  75%{
    transform: scale(0.9);
  }
  100%{
    transform: scale(1);
  }
}

文档流

在介绍BFC之前，需要先给大家介绍一下文档流。

我们常说的文档流其实分为定位流、浮动流、普通流三种。

绝对定位(Absolute positioning)

如果元素的属性 position 为 absolute 或 fixed，它就是一个绝对定位元素。

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；

对于 position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、absolute，如果没有则相对于html；

对于 position:fixed，正常来说是相对于浏览器窗口定位的，但是当元素祖先的 transform 属性非 none 时，会相对于该祖先进行定位。

浮动 (float)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

普通流 (normal flow)

普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行。

除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

BFC 概念

先看下MDN上关于BFC的定义：

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

除了 BFC，还有：

• IFC（行级格式化上下文）- inline 内联
• GFC（网格布局格式化上下文）- display: grid
• FFC（自适应格式化上下文）- display: flex或display: inline-flex

注意：同一个元素不能同时存在于两个 BFC 中。

BFC的触发方式

MDN上对于BFC的触发条件写的很多，总结一下常见的触发方式有（只需要满足一个条件即可触发 BFC 的特性）：

• 根元素，即 <html>
• 浮动元素：float 值为 left 、right
• overflow 值不为 visible，即为 auto、scroll、hidden
• display 值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
• 绝对定位元素：position 值为 absolute、fixed

BFC的特性

• BFC 是页面上的一个独立容器，容器里面的子元素不会影响外面的元素。
• BFC 内部的块级盒会在垂直方向上一个接一个排列
• 同一 BFC 下的相邻块级元素可能发生外边距折叠，创建新的 BFC 可以避免外边距折叠
• 每个元素的外边距盒（margin box）的左边与包含块边框盒（border box）的左边相接触（从右向左的格式的话，则相反），即使存在浮动
• 浮动盒的区域不会和 BFC 重叠
• 计算 BFC 的高度时，浮动元素也会参与计算

应用

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。我们可以利用BFC的这个特性来做很多事。

自适应两列布局

左列浮动（定宽或不定宽都可以），给右列开启 BFC。

<div>
    <div class="left">浮动元素，无固定宽度</div>
    <div class="right">自适应</div>
</div>

* {
    margin: 0;
    padding: 0;
}
.left {
    float: left;
    height: 200px;
    margin-right: 10px;
    background-color: red;
}
.right {
    overflow: hidden;
    height: 200px;
    background-color: yellow;
}

效果：

• 将左列设为左浮动，将自身高度塌陷，使得其它块级元素可以和它占据同一行的位置。
• 右列为 div 块级元素，利用其自身的流特性占满整行。
• 右列设置overflow: hidden,触发 BFC 特性，使其自身与左列的浮动元素隔离开，不占满整行。

这即是上面说的 BFC 的特性之一：浮动盒的区域不会和 BFC 重叠

防止外边距（margin）重叠

兄弟元素之间的外边距重叠

<div>
    <div class="child1"></div>
    <div class="child2"></div>
</div>

* {
    margin: 0;
    padding: 0;
}
.child1 {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    background-color: red;
}
.child2 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    background-color: green;
}

效果：

两个块级元素，红色 div 距离底部 10px，绿色 div 距离顶部 20px，按道理应该两个块级元素相距 30px 才对，但实际却是取距离较大的一个，即 20px。

块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的较大者，这种行为称为外边距折叠（重叠），注意这个是发生在属于同一 BFC 下的块级元素之间

根据 BFC 特性，创建一个新的 BFC 就不会发生 margin 折叠了。比如我们在他们两个 div 外层再包裹一层容器，加属性 overflow: hidden，触发 BFC，那么两个 div 就不属于同个 BFC 了。

<div>
    <div class="parent">
        <div class="child1"></div>
    </div>
    <div class="parent">
        <div class="child2"></div>
    </div>
</div>

.parent {
    overflow: hidden;
}

/* ... */

这个关于兄弟元素外边距叠加的问题，除了触发 BFC 也有其他方案，比如你统一只用上边距或下边距，就不会有上面的问题。

父子元素的外边距重叠

这种情况存在父元素与其第一个或最后一个子元素之间（嵌套元素）。

如果在父元素与其第一个/最后一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的外边距 分开，此时子元素的外边距会“溢出”到父元素的外面。

<div id="parent">
  <div id="child"></div>
</div>

* {
    margin: 0;
    padding: 0;
}
#parent {
    width: 200px;
    height: 200px;
    background-color: green;
    margin-top: 20px;
}
#child {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 30px;
}

如上图，红色的 div 在绿色的 div 内部，且设置了 margin-top 为 30px，但我们发现红色 div 的顶部与绿色 div 顶部重合，并没有距离顶部 30px，而是溢出到父元素的外面计算。即本来父元素距离顶部只有 20px，被子元素溢出影响，外边距重叠，取较大的值，则距离顶部 30px。

解决办法：

• 给父元素触发 BFC（如添加overflow: hidden）
• 给父元素添加 border
• 给父元素添加 padding

这样就能实现我们期望的效果了：

清除浮动解决令父元素高度坍塌的问题

当容器内子元素设置浮动时，脱离了文档流，容器中总父元素高度只有边框部分高度。

<div class="parent">
  <div class="child"></div>
</div>

* {
    margin: 0;
    padding: 0;
}
.parent {
    border: 4px solid red;
}
.child {
    float: left;
    width: 200px;
    height: 200px;
    background-color: blue;
}

解决办法：给父元素触发 BFC，使其有 BFC 特性：计算 BFC 的高度时，浮动元素也会参与计算

.parent {
    overflow: hidden;
    border: 4px solid red;
}

上面我们都是用的 overflow: hidden 触发 BFC，因为确实常用，但是触发 BFC 也不止是只有这一种方法。

如上面写的所示，可以设置float: left;，float: right;，display: inline-block;，overflow: auto;，display: flex;，display: table;，position 为 absolute 或 fixed 等等，这些都可以触发，不过父元素宽度表现不一定相同，但父元素高度都被撑出来了。

当然实际运用可不是随便挑一个走，还是根据场景选择。

• 利用vw来实现：

.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}

• 利用元素的margin/padding百分比是相对父元素width的性质来实现：

.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}

• 利用子元素的margin-top的值来实现：

.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}
.square::after {
  content: '';
  display: block;
  margin-top: 100%;
}

通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。

z-index属性在下列情况下会失效：

• 父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
• 元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
• 元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

20230116，有小伙伴补充：

• 在手机端 iOS 13 系统中，-webkit-overflow-scrolling:touch 也会使 z-index 失效，将 touch 换成 unset

具体原因可参考这篇文章： 为什么我的 z-index 又不生效了？

CSS 工程化是为了解决以下问题：

1. 宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计？
2. 编码优化：怎样写出更好的 CSS？
3. 构建：如何处理我的 CSS，才能让它的打包结果最优？
4. 可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？

以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践：

• 预处理器：Less、 Sass 等；
• 重要的工程化插件： PostCss；
• Webpack loader 等 。

基于这三个方向，可以衍生出一些具有典型意义的子问题，这里我们逐个来看：

（1）预处理器：为什么要用预处理器？它的出现是为了解决什么问题？

预处理器，其实就是 CSS 世界的“轮子”。预处理器支持我们写一种类似 CSS、但实际并不是 CSS 的语言，然后把它编译成 CSS 代码：

那为什么写 CSS 代码写得好好的，偏偏要转去写“类 CSS”呢？这就和本来用 JS 也可以实现所有功能，但最后却写 React 的 jsx 或者 Vue 的模板语法一样。

随着前端业务复杂度的提高，前端工程中对 CSS 提出了以下的诉求：

1. 宏观设计上：我们希望能优化 CSS 文件的目录结构，对现有的 CSS 文件实现复用；
2. 编码优化上：我们希望能写出结构清晰、简明易懂的 CSS，需要它具有一目了然的嵌套层级关系，而不是无差别的一铺到底写法；我们希望它具有变量特征、计算能力、循环能力等等更强的可编程性，这样我们可以少写一些无用的代码；
3. 可维护性上：更强的可编程性意味着更优质的代码结构，实现复用意味着更简单的目录结构和更强的拓展能力，这两点如果能做到，自然会带来更强的可维护性。

这三点是传统 CSS 所做不到的，也正是预处理器所解决掉的问题。预处理器普遍会具备这样的特性：

• 嵌套代码的能力，通过嵌套来反映不同 css 属性之间的层级关系 ；
• 支持定义 css 变量；
• 提供计算函数；
• 允许对代码片段进行 extend 和 mixin；
• 支持循环语句的使用；
• 支持将 CSS 文件模块化，实现复用。

（2）PostCss：PostCss 是如何工作的？我们在什么场景下会使用 PostCss？

它和预处理器的不同就在于，预处理器处理的是 类CSS，而 PostCss 处理的就是 CSS 本身。Babel 可以将高版本的 JS 代码转换为低版本的 JS 代码。PostCss 做的是类似的事情：它可以编译尚未被浏览器广泛支持的先进的 CSS 语法，还可以自动为一些需要额外兼容的语法增加前缀。更强的是，由于 PostCss 有着强大的插件机制，支持各种各样的扩展，极大地强化了 CSS 的能力。

PostCss 在业务中的使用场景非常多：

• 提高 CSS 代码的可读性：PostCss 其实可以做类似预处理器能做的工作；
• 当我们的 CSS 代码需要适配低版本浏览器时，PostCss 的 Autoprefixer 插件可以帮助我们自动增加浏览器前缀；
• 允许我们编写面向未来的 CSS：PostCss 能够帮助我们编译 CSS next 代码；

（3）Webpack 能处理 CSS 吗？如何实现？

• Webpack 在裸奔的状态下，是不能处理 CSS 的，Webpack 本身是一个面向 JavaScript 且只能处理 JavaScript 代码的模块化打包工具；
• Webpack 在 loader 的辅助下，是可以处理 CSS 的。

如何用 Webpack 实现对 CSS 的处理：

• Webpack 中操作 CSS 需要使用的两个关键的 loader：css-loader 和 style-loader
• 注意，答出“用什么”有时候可能还不够，面试官会怀疑你是不是在背答案，所以你还需要了解每个 loader 都做了什么事情：
  • css-loader：导入 CSS 模块，对 CSS 代码进行编译处理；
  • style-loader：创建style标签，把 CSS 内容写入标签。

在实际使用中，css-loader 的执行顺序一定要安排在 style-loader 的前面。因为只有完成了编译过程，才可以对 css 代码进行插入；若提前插入了未编译的代码，那么 webpack 是无法理解这坨东西的，它会无情报错。

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。

为什么要使用它们？

• 结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理， 减少无意义的机械劳动。
• 可以轻松实现多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

• 单行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

• 多行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

注意：由于上面的三个属性都是 CSS3 的属性，没有浏览器可以兼容，所以要在前面加一个-webkit- 来兼容一部分浏览器。

预处理器， 如：less，sass，stylus，用来预编译sass或者less，增加了css代码的复用性。层级，mixin， 变量，循环， 函数等对编写以及开发UI组件都极为方便。

后处理器， 如： postCss，通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。

其它css预处理器语言：Sass（Scss）, Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css。

使用原因：

• 结构清晰， 便于扩展
• 可以很方便的屏蔽浏览器私有语法的差异
• 可以轻松实现多重继承
• 完美的兼容了CSS代码，可以应用到老项目中

translate 是 transform 属性的⼀个值。

改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。

⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。

transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。

因此translate()更⾼效，可以缩短平滑动画的绘制时间。

⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。

具体的原理可查看 【前端基础系列】CSS篇-带你搞懂“硬件加速”

• transition是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。
• animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

面试中可能会经常会碰到怎么解决动画卡顿的问题，然后会引导到硬件加速。那么究竟什么是硬件加速，为什么它可以提高咱们的动画效率？我们今天就来一探究竟。

首先，我们先从 CPU 和 GPU 开始了解。

CPU 和 GPU 的区别

CPU 即中央处理器，GPU 即图形处理器。

CPU是计算机的大脑，它提供了一套指令集，我们写的程序最终会通过 CPU 指令来控制的计算机的运行。它会对指令进行译码，然后通过逻辑电路执行该指令。整个执行的流程分为了多个阶段，叫做流水线。指令流水线包括取指令、译码、执行、取数、写回五步，这是一个指令周期。CPU会不断的执行指令周期来完成各种任务。

GPU，是Graphics ProcessingUnit的简写，是现代显卡中非常重要的一个部分，其地位与CPU在主板上的地位一致，主要负责的任务是加速图形处理速度。GPU是显卡的“大脑”，它决定了该显卡的档次和大部分性能，同时也是2D显示卡和3D显示卡的区别依据。2D显示芯片在处理3D图像和特效时主要依赖CPU的处理能力，称为“软加速”。3D显示芯片是将三维图像和特效处理功能集中在显示芯片内，也即所谓的“硬件加速”功能。

要解释两者的区别，要先明白两者的相同之处：两者都有总线和外界联系，有自己的缓存体系，以及数字和逻辑运算单元。

一句话，两者都为了完成计算任务而设计。

两者的区别在于存在于片内的缓存体系和数字逻辑运算单元的结构差异：

• CPU虽然有多核，但总数没有超过两位数，每个核都有足够大的缓存和足够多的数字和逻辑运算单元，并辅助有很多加速分支判断甚至更复杂的逻辑判断的硬件；
• GPU 的核数远超CPU，被称为众核（NVIDIA Fermi有512个核）。每个核拥有的缓存大小相对小，数字逻辑运算单元也少而简单（GPU初始时在浮点计算上一直弱于CPU）。

从结果上导致CPU擅长处理具有复杂计算步骤和复杂数据依赖的计算任务，如分布式计算，数据压缩，人工智能，物理模拟，以及其他很多很多计算任务等。

GPU由于历史原因，是为了视频游戏而产生的（至今其主要驱动力还是不断增长的视频游戏市场），在三维游戏中常常出现的一类操作是对海量数据进行相同的操作，如：对每一个顶点进行同样的坐标变换，对每一个顶点按照同样的光照模型计算颜色值。

GPU的众核架构非常适合把同样的指令流并行发送到众核上，采用不同的输入数据执行。在通用计算领域有广泛应用，包括：数值分析，海量数据处理（排序，Map-Reduce等），金融分析等等。

简而言之，当程序员为CPU编写程序时，他们倾向于利用复杂的逻辑结构优化算法从而减少计算任务的运行时间，即 Latency。当程序员为GPU编写程序时，则利用其处理海量数据的优势，通过提高总的数据吞吐量（Throughput）来掩盖 Lantency。

目前，CPU 和 GPU 的区别正在逐渐缩小，因为GPU也在处理不规则任务和线程间通信方面有了长足的进步。

每一帧的执行步骤

一般浏览器的刷新率为60HZ，即1秒钟刷新60次。

1000ms / 60hz = 16.6 ，也就是大概每过 16.6ms 浏览器就会渲染一帧画面。

浏览器对每一帧画面的渲染工作都要在 16ms 内完成，超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。

简单概括下，浏览器在每一帧里会依次执行以下这些动作：

• JavaScript：JavaScript 实现动画效果，DOM 元素操作等。
• Style（计算样式）：确定每个 DOM 元素应该应用什么 CSS 规则。
• Layout（布局）：计算每个 DOM 元素在最终屏幕上显示的大小和位置。由于 web 页面的元素布局是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫 reflow。
• Paint（绘制）：在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。
• Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。

减少或者避免 layout，paint 可以让页面减少卡顿，动画效果更加流畅。

完整的渲染流程

更具体一些，一个完整的渲染步骤大致可总结为如下：

• 渲染进程将HTML内容转换为能够读懂的DOM树结构。
• 渲染引擎将CSS样式表转化为浏览器可以理解的 styleSheets ，计算出DOM节点的样式。
• 创建布局树，并计算元素的布局信息。
• 对布局树进行分层，并生成分层树。
• 为每个图层生成绘制列表，并将其提交到合成线程。
• 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
• 合成线程发送绘制图块命令DrawQuad给浏览器进程。
• 浏览器进程根据DrawQuad消息生成页面，并显示到显示器上

普通图层和复合图层

上面的介绍中，提到了 composite 概念。

可以简单的这样理解，浏览器渲染的图层一般包含两大类：渲染图层（普通图层）以及复合图层

• 渲染图层：又称默认复合层，是页面普通的文档流。我们虽然可以通过绝对定位，相对定位，浮动定位脱离文档流，但它仍然属于默认复合层，共用同一个绘图上下文对象（GraphicsContext）。
• 复合图层，它会单独分配资源（当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响默认复合层里的回流重绘）

某些特殊的渲染层会被提升为复合成层（Compositing Layers），复合图层拥有单独的 GraphicsLayer，而其他不是复合图层的渲染层，则和其第一个拥有 GraphicsLayer 父层共用一个。

每个 GraphicsLayer 都有一个 GraphicsContext，GraphicsContext 会负责输出该层的位图，位图是存储在共享内存中，作为纹理上传到 GPU 中，最后由 GPU 将多个位图进行合成，然后 draw 到屏幕上，此时，我们的页面也就展现到了屏幕上。

可以 Chrome源码调试 -> More Tools -> Rendering -> Layer borders中看到，黄色的就是复合图层信息。

硬件加速

硬件加速，直观上说就是依赖 GPU 实现图形绘制加速，软硬件加速的区别主要是图形的绘制究竟是 GPU 来处理还是 CPU，如果是 GPU，就认为是硬件加速绘制，反之，则为软件绘制。

一般一个元素开启硬件加速后会变成复合图层，可以独立于普通文档流中，改动后可以避免整个页面重绘，提升性能。

常用的硬件加速方法有：

• 最常用的方式：translate3d、translateZ
• opacity 属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）
• will-change属性（这个知识点比较冷僻），一般配合 opacity 与 translate 使用（而且经测试，除了上述可以引发硬件加速的属性外，其它属性并不会变成复合层），作用是提前告诉浏览器要变化，这样浏览器会开始做一些优化工作（这个最好用完后就释放）
• <video>、<iframe>、<canvas>、<webgl>等元素
• 其它，譬如以前的 flash 插件

当然，有的时候我们想强制触发硬件渲染，就可以通过上面的属性，比如

will-change: transform;

或者

transform:translate3d(0, 0, 0);

使用硬件加速的注意事项

使用硬件加速并不是十全十美的事情，比如：

• 内存。如果GPU加载了大量的纹理，那么很容易就会发生内容问题，这一点在移动端浏览器上尤为明显，所以，一定要牢记不要让页面的每个元素都使用硬件加速。
• 使用GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制。即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。

所以不要大量使用复合图层，否则由于资源消耗过度，页面可能会变的更加卡顿。

同时，在使用硬件加速时，尽可能的使用z-index，防止浏览器默认给后续的元素创建复合层渲染。

具体的原理是这样的：

webkit CSS3中，如果一个元素添加了硬件加速，并且z-index层级比较低，那么在这个元素的后面其它元素（层级比这个元素高的，或者相同的，并且releative或absolute属性相同的），会默认变为复合层渲染，如果处理不当会极大的影响性能。

简单点理解，其实可以认为是一个隐式合成的概念：如果a是一个复合图层，而且b在a上面，那么b也会被隐式转为一个复合图层，这点需要特别注意。

硬件加速就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得 animation 与 transition 更加顺畅。

我们可以在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提升性能。

现在大多数电脑的显卡都支持硬件加速。鉴于此，我们可以发挥GPU的力量，从而使我们的网站或应用表现的更为流畅。

CSS动画

优点

• 浏览器可以对动画进行优化
  
• 代码相对简单,性能调优方向固定
  
• 对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

缺点

• 运行过程控制较弱,无法附加事件绑定回调函数
  
• 代码冗长，想用CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重

JS动画

优点

• 控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
  
• 动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成
  
• CSS3有兼容性问题，而JS大多时候没有兼容性问题

缺点

• 代码的复杂度高于CSS动画
  
• JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况

前端常用的动画实现方式有以下种：

1. css3的transition 属性
2. css3的animation 属性
3. 原生JS动画
4. 使用canvas绘制动画
5. SVG动画
6. Jquery的animate函数
7. 使用gif图片

1. css3的transition

transition属性：

用来设置样式的属性值是如何从一种状态平滑过渡到另外一种状态

语法：

transition: property duration timing-function delay;

transition是一种简写属性,它可以拆分为四个过渡属性。你可以 transition: 值1，值2，值3，值4 这样写，也可以：transition-property: 值1;，transition-duration:值2;，transition-timing-function:值2;，transition-delay:值4;这样写。

演示代码：

<div></div>

div{
  width:50px;
  height: 50px;
  background-color: pink;
}

div:hover{
  width:200px;
}

效果图：

由上图可看出：鼠标移入移出时,width状态的变化是瞬间完成的。

添加transition: 1s;后

div{
  width:50px;
  height: 50px;
  background-color: pink;
  transition: 1s;
}
div:hover{
  width:200px;
}