二_CSS_基础

发表于2025-11-18|更新于2025-11-18|前端面试

|浏览量:

本文将详细讲解CSS的基础语法，包括选择器、属性、值等内容，适合初学者阅读。

1、简述 CSS 的盒模型（标准盒模型和 IE 盒模型）的区别

CSS 的盒模型是用于布局和计算元素尺寸的基础概念，它将每个 HTML 元素视为一个矩形的“盒子”，包含内容、内边距、边框和外边距。标准盒模型（W3C 盒模型）和 IE 盒模型（怪异盒模型）的核心区别在于元素总宽度和高度的计算方式：

一、标准盒模型（W3C 盒模型）

默认模式：现代浏览器默认采用的盒模型。
尺寸计算方式：
元素的总宽度 = width（内容宽度） + padding-left + padding-right + border-left + border-right
元素的总高度 = height（内容高度） + padding-top + padding-bottom + border-top + border-bottom
特点：width 和 height 仅作用于内容区域（content），内边距（padding）和边框（border）会增加元素的实际占用空间。

示例：
1
2
3
4
5
6
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid black;
}

元素实际总宽度 = 200px（内容） + 10px×2（左右内边距） + 5px×2（左右边框） = 230px
实际总高度 = 100px + 10px×2 + 5px×2 = 130px

二、IE 盒模型（怪异盒模型）

历史背景：早期 IE 浏览器（IE6 及以下，在混杂模式下）采用的盒模型，也称为“怪异盒模型”。
尺寸计算方式：
元素的总宽度 = width（包含内容、内边距和边框）
元素的总高度 = height（包含内容、内边距和边框）
特点：width 和 height 包含内容区域（content）、内边距（padding）和边框（border），设置后元素实际占用空间不会因 padding 和 border 而增加。

使用上述相同的 CSS 代码（若启用 IE 盒模型）：
元素实际总宽度 = width 设定值 200px（已包含内容、内边距和边框）
实际内容宽度 = 200px - 10px×2（左右内边距） - 5px×2（左右边框） = 170px

三、如何切换盒模型

通过 CSS 的 box-sizing 属性可以手动控制盒模型类型：

box-sizing: content-box：使用标准盒模型（默认值）。
box-sizing: border-box：使用IE 盒模型（现代开发中更常用，便于精确控制元素尺寸）。

示例（全局设置 IE 盒模型，简化布局计算）：

1
2
3

* {
  box-sizing: border-box; /* 所有元素采用 IE 盒模型 */
}

四、总结

类型	`width`/`height` 包含范围	总尺寸计算方式	现代开发推荐度
标准盒模型	仅包含内容区域（content）	内容 + padding + border + margin	较低
IE 盒模型	内容 + padding + border	`width`/`height` 直接等于总尺寸	较高（便于布局）

现代开发中，通常全局设置 box-sizing: border-box，因为它能让元素尺寸计算更直观，避免因 padding 和 border 导致的布局偏差。

2、CSS 中如何设置元素的盒模型为标准盒模型或 IE 盒模型？

box-sizing: content-box：使用标准盒模型（默认值）。
box-sizing: border-box：使用IE 盒模型（现代开发中更常用，便于精确控制元素尺寸）。

3、CSS 选择器有哪些类型？优先级如何计算？

CSS 选择器用于定位 HTML 元素并应用样式，常见类型可分为基础选择器和复合选择器，其优先级遵循特定计算规则。

一、CSS 选择器的主要类型

1. 基础选择器（最常用）

元素选择器：通过 HTML 标签名匹配元素

1	p { color: red; } /* 匹配所有 <p> 标签 */

类选择器：通过 class 属性值匹配（以 . 开头）

1	.active { background: blue; } /* 匹配所有 class="active" 的元素 */

ID 选择器：通过 id 属性值匹配（以 # 开头，页面中唯一）
1
#header { height: 80px; } /* 匹配 id="header" 的元素 */

通配符选择器：匹配所有元素（以 * 表示）

1	* { margin: 0; padding: 0; } /* 清除所有元素的默认边距 */

属性选择器：通过元素属性及属性值匹配

1 2	[type="text"] { border: 1px solid #ccc; } /* 匹配 type="text" 的元素 / [data-id="123"] { color: green; } / 匹配 data-id="123" 的元素 */

2. 复合选择器（组合使用基础选择器）

后代选择器：匹配父元素内的所有后代元素（用空格分隔）

1	.nav li { margin: 0 10px; } /* 匹配 .nav 内的所有 <li>（包括嵌套的） */

子选择器：仅匹配父元素的直接子元素（用 > 分隔）

1	.nav > li { border-bottom: 1px solid #eee; } /* 仅匹配 .nav 的直接子 <li> */

相邻兄弟选择器：匹配某元素后紧邻的第一个兄弟元素（用 + 分隔）
1
h2 + p { margin-top: 10px; } /* 匹配 h2 后面紧邻的第一个 p 元素 */

通用兄弟选择器：匹配某元素后所有同级兄弟元素（用 ~ 分隔）

1	.active ~ li { opacity: 0.5; } /* 匹配 .active 后面所有同级 li 元素 */

交集选择器：同时满足多个条件（直接连接）

1	p.active { font-weight: bold; } /* 匹配 class="active" 的 p 元素 */

并集选择器：匹配多个选择器的元素（用 , 分隔）

1	h1, h2, h3 { color: #333; } /* 匹配 h1、h2、h3 元素 */

3. 伪类选择器（用于元素的特定状态或位置）

状态伪类：:hover（鼠标悬停）、:active（点击时）、:focus（获焦时）、:checked（选中时）等

1 2	a:hover { color: red; } /* 鼠标悬停在链接上时 / input:focus { outline: 2px solid blue; } / 输入框获焦时 */

结构伪类：:first-child（第一个子元素）、:last-child（最后一个子元素）、:nth-child(n)（第 n 个子元素）等

1 2	ul li:first-child { border-top: 1px solid #eee; } /* 列表第一个 li / table tr:nth-child(even) { background: #f5f5f5; } / 表格偶数行 */

4. 伪元素选择器（用于元素的特定部分）

::before：在元素内容前插入内容
::after：在元素内容后插入内容
::first-letter：匹配文本的第一个字符

::first-line：匹配文本的第一行

1 2	.tips::before { content: "提示："; color: orange; } /* 在 .tips 内容前加文字 / p::first-letter { font-size: 2em; } / 段落首字母放大 */

二、选择器优先级计算规则

当多个选择器匹配同一元素时，优先级高的样式会覆盖优先级低的样式，优先级按以下规则计算：

优先级权重：
优先级从高到低分为四级，权重值可简化理解为：
- 内联样式（style 属性）：1000
- ID 选择器：100
- 类选择器、属性选择器、伪类选择器：10
- 元素选择器、伪元素选择器：1
- 通配符选择器（*）：0
计算方式：将选择器中各级别的数量乘以对应权重后相加，总和越大优先级越高。

示例：
- #header .nav li → 1 个 ID + 1 个类 + 1 个元素 → 100 + 10 + 1 = 111
- .box[type="text"] → 1 个类 + 1 个属性 → 10 + 10 = 20
- div p → 2 个元素 → 1 + 1 = 2
特殊规则：
- **!important**：添加在样式值后（如 color: red !important;），优先级最高，会覆盖所有其他样式（除非其他样式也加 !important 且权重更高）。
  ⚠️ 建议少用，可能导致样式难以维护。
- 继承的样式：优先级最低，任何直接匹配的样式都能覆盖继承样式。
- 权重相同：后声明的样式会覆盖先声明的样式（“后来者居上”）。

三、优先级示例

1
2
3

<div id="box" class="container">
  <p class="text">测试文本</p>
</div>

/* 优先级：1（元素） + 10（类） = 11 */
p.text { color: blue; }

/* 优先级：100（ID） + 1（元素） = 101 → 更高，生效 */
#box p { color: red; }

/* 内联样式：1000 → 最高，最终生效 */
/* <p class="text" style="color: green;">测试文本</p> */

总结

选择器类型：基础选择器（元素、类、ID 等）、复合选择器（后代、子元素等）、伪类/伪元素选择器。
优先级：按权重计算（内联 > ID > 类/属性/伪类 > 元素/伪元素），权重相同则后声明的生效，!important 优先级最高。

理解选择器类型和优先级，是编写可维护 CSS 代码的基础。

4、简述 CSS 中的层叠（Cascade）、继承（Inheritance）和特异性（Specificity）的含义

CSS 中的层叠（Cascade）、继承（Inheritance） 和特异性（Specificity） 是控制样式如何应用到元素的三大核心机制，共同决定了最终呈现的样式效果：

1. 层叠（Cascade）

层叠是 CSS 最核心的特性，指当多个样式规则应用于同一元素时，浏览器通过一套规则解决冲突，确定最终生效的样式。

核心逻辑：当样式冲突时，按以下优先级顺序决定最终样式（从高到低）：
1. 重要性（Importance）：带 !important 的样式 > 普通样式；
2. 来源（Origin）：用户自定义样式 > 作者样式（开发者写的样式） > 浏览器默认样式（可通过 !important 反转）；
3. 特异性（Specificity）：选择器特异性高的样式优先（详见下文）；
4. 顺序（Order）：同一优先级下，后声明的样式覆盖先声明的样式（“后来者居上”）。

示例：

1 2	p { color: red; } /* 先声明 / p { color: blue; } / 后声明，最终生效 */

2. 继承（Inheritance）

继承指子元素会自动获取父元素的某些样式属性，无需额外声明，简化样式编写。

可继承的属性：通常与文本相关，如 color、font-size、text-align、line-height 等。
不可继承的属性：通常与布局相关，如 width、height、border、margin 等。
控制继承：
- inherit：强制子元素继承父元素的属性值；
- initial：重置属性为默认值（不继承）；
- unset：若属性可继承则继承，否则使用默认值。

示例：

<div style="color: red; border: 1px solid black;">
  父元素（红色文本，有边框）
  <p>子元素（继承红色文本，不继承边框）</p>
</div>

3. 特异性（Specificity）

特异性（也称为“优先级”）用于衡量选择器的“精确程度”，决定了多个选择器匹配同一元素时，哪个样式规则优先生效。

计算规则：将选择器按类型分为四级，权重累加（权重值仅为概念，非数学计算）：
- 第一级：内联样式（style 属性）→ 权重 1000；
- 第二级：ID 选择器 → 每个权重 100；
- 第三级：类选择器、属性选择器、伪类选择器 → 每个权重 10；
- 第四级：元素选择器、伪元素选择器 → 每个权重 1。
示例：
- #header .nav li → 1 个 ID（100） + 1 个类（10） + 1 个元素（1） → 总特异性更高；
- div .text → 1 个类（10） + 1 个元素（1） → 总特异性更低。

总结

继承：子元素自动获取父元素样式，减少重复代码；
特异性：通过选择器的“精确程度”决定样式优先级；
层叠：综合重要性、来源、特异性和顺序，最终解决样式冲突。

这三个机制共同确保了 CSS 样式的灵活应用和冲突解决，是理解 CSS 工作原理的基础。

5、CSS 中的 display 属性有哪些常见取值？分别表示什么布局行为？

CSS 的 display 属性用于控制元素的显示类型和布局行为，是布局中最核心的属性之一。常见取值及对应的布局行为如下：

一、基础布局类型

1. `display: block`（块级元素）

布局行为：
- 元素独占一行（前后自动换行）；
- 可设置 width、height、margin、padding 等属性；
- 宽度默认填充父元素的可用空间。
常见元素：<div>、<p>、<h1>-<h6>、<ul>、<li> 等。

示例：

.block-element {
  display: block;
  width: 200px;
  height: 100px;
}

2. `display: inline`（行内元素）

布局行为：
- 元素在同一行内排列（不换行）；
- 不可设置 width、height（由内容决定大小）；
- margin 和 padding 仅在水平方向生效（垂直方向不影响布局）。
常见元素：<span>、<a>、<strong>、<em> 等。

示例：

.inline-element {
  display: inline;
  margin: 10px; /* 仅左右margin生效 */
}

3. `display: inline-block`（行内块元素）

布局行为：
- 兼具 inline 和 block 的特点：在同一行排列，且可设置宽高、margin、padding；
- 宽度默认由内容决定，也可手动设置。
适用场景：需要在一行内显示多个可控制尺寸的元素（如按钮、图标、导航项）。

示例：

.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px; /* 所有方向margin均生效 */
}

二、隐藏元素

4. `display: none`

布局行为：元素完全隐藏，且不占据任何页面空间（从渲染树中移除）。
区别于 visibility: hidden（元素隐藏但仍占据空间）。
适用场景：动态显示/隐藏元素（如弹窗、条件渲染内容）。

示例：

1
2
3

.hidden-element {
  display: none; /* 元素消失，不占空间 */
}

三、表格布局

5. `display: table` 及相关值

模拟表格布局，用于非表格元素实现表格样式（语义化优于实际 <table> 标签）：

display: table：模拟 <table> 元素（块级表格容器）；
display: table-row：模拟 <tr> 元素（表格行）；
display: table-cell：模拟 <td> 元素（表格单元格，支持垂直居中）；
display: table-header-group/table-footer-group：模拟 <thead>/<tfoot>。

示例（实现垂直居中）：

.table-container { display: table; }
.table-row { display: table-row; }
.table-cell {
  display: table-cell;
  vertical-align: middle; /* 单元格内容垂直居中 */
  height: 200px;
}

四、弹性布局

6. `display: flex`（弹性盒布局）

布局行为：元素成为弹性容器，子元素（弹性项）按弹性布局规则排列，支持灵活的对齐、分布和重排。
核心特点：一维布局（沿水平或垂直方向），子元素可自动伸缩以适应空间。
适用场景：响应式布局、导航栏、卡片排列、对齐方式控制等。

示例：

.flex-container {
  display: flex;
  justify-content: space-between; /* 子元素水平分布 */
  align-items: center; /* 子元素垂直居中 */
}

五、网格布局

7. `display: grid`（网格布局）

布局行为：元素成为网格容器，子元素（网格项）按二维网格（行和列）排列，精确控制行列尺寸和位置。
核心特点：二维布局（同时控制行和列），适合复杂布局结构（如仪表盘、卡片网格）。

示例：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 三列，比例 1:2:1 */
  grid-gap: 20px; /* 网格间距 */
}

六、其他常见取值

display: contents：元素自身不产生盒子，但子元素仍正常显示（用于消除父元素的布局影响）。
display: list-item：模拟列表项（如 <li>），会自动生成项目符号。
display: flow-root：创建一个新的块级格式化上下文（BFC），解决浮动元素导致的父元素高度塌陷问题。

总结

display 属性决定了元素的基本布局模式，不同取值对应不同的排版逻辑：

基础布局（block/inline/inline-block）用于简单流式布局；
弹性布局（flex）和网格布局（grid）用于复杂响应式布局；
表格相关值用于模拟表格样式；
none 用于隐藏元素。

掌握 display 的取值及行为，是实现各类布局效果的基础。

6、如何实现元素的水平居中？请列举至少 3 种方法

实现元素水平居中的方法有多种，适用于不同场景，以下是最常用的 5 种方案：

1. 块级元素定宽：`margin: 0 auto`

适用场景：已知宽度的块级元素（如固定宽度的 <div>）。
原理：通过左右 margin 自动分配父容器的剩余空间，实现水平居中。

1
2
3

<div class="parent">
  <div class="child">定宽块级元素</div>
</div>

.parent {
  width: 100%; /* 父容器需有明确宽度（可继承） */
  background: #f5f5f5;
}

.child {
  width: 300px; /* 必须设置宽度 */
  margin: 0 auto; /* 核心：左右margin自动 */
  height: 100px;
  background: #42b983;
}

2. Flex 布局（推荐）

适用场景：任何类型元素（块级、行内、不定宽），支持多个子元素同时居中。
原理：父容器启用 Flex 布局，通过 justify-content 控制子元素水平对齐。

1
2
3

<div class="parent">
  <div class="child">Flex 居中（支持不定宽）</div>
</div>

.parent {
  display: flex; /* 父容器开启 Flex 布局 */
  justify-content: center; /* 子元素水平居中 */
  height: 150px;
  background: #f5f5f5;
}

.child {
  /* 无需固定宽度，内容自适应 */
  padding: 20px;
  background: #42b983;
}

3. 行内/行内块元素：`text-align: center`

适用场景：行内元素（如文本、<span>、<a>）或行内块元素（inline-block）。
原理：通过父容器的文本对齐属性，使行内元素水平居中。

<div class="parent">
  <span class="inline-child">行内元素</span>
  <div class="inline-block-child">行内块元素</div>
</div>

.parent {
  text-align: center; /* 父容器设置文本居中 */
  padding: 20px;
  background: #f5f5f5;
}

.inline-child {
  background: #42b983;
}

.inline-block-child {
  display: inline-block; /* 转为行内块 */
  padding: 10px;
  background: #e74c3c;
}

4. 绝对定位 + 位移（不定宽适用）

适用场景：需要脱离文档流的元素（如弹窗、悬浮层），支持不定宽。
原理：通过绝对定位将元素左移 50%，再用 transform 向左偏移自身宽度的 50%。

1
2
3

<div class="parent">
  <div class="child">绝对定位居中（不定宽）</div>
</div>

.parent {
  position: relative; /* 父容器相对定位 */
  height: 150px;
  background: #f5f5f5;
}

.child {
  position: absolute; /* 子元素绝对定位 */
  left: 50%; /* 相对于父容器左移 50% */
  transform: translateX(-50%); /* 自身左移 50% 宽度 */
  background: #42b983;
}

5. Grid 网格布局

适用场景：需要二维布局的复杂场景，代码简洁。
原理：父容器启用 Grid 布局，通过 justify-items 或 place-items 控制对齐。

1
2
3

<div class="parent">
  <div class="child">Grid 居中</div>
</div>

.parent {
  display: grid; /* 父容器开启 Grid 布局 */
  justify-items: center; /* 子元素水平居中 */
  height: 150px;
  background: #f5f5f5;
}

.child {
  background: #42b983;
  padding: 15px;
}

总结

方法	适用元素	优点	兼容性
`margin: 0 auto`	定宽块级元素	简单直观	所有浏览器
Flex 布局	所有元素	灵活，支持不定宽	IE10+
`text-align: center`	行内/行内块元素	适合文本类元素	所有浏览器
绝对定位 + transform	所有元素	脱离文档流，适合悬浮元素	IE9+
Grid 布局	所有元素	二维布局能力强	IE11+

根据元素类型和布局需求选择：现代开发优先用 Flex 布局，简单场景用 margin: 0 auto 或 text-align: center。

7、如何实现元素的垂直居中？请列举至少 3 种方法

实现元素的垂直居中是前端布局中的常见需求，根据元素类型和布局场景，以下是5种常用方法：

1. Flex 弹性布局（推荐）

适用场景：任何类型元素（块级、行内、不定高），支持单个或多个子元素。
原理：父容器启用 Flex 布局，通过 align-items 控制垂直对齐。

1
2
3

<div class="parent">
  <div class="child">Flex 垂直居中</div>
</div>

.parent {
  display: flex; /* 父容器开启 Flex 布局 */
  align-items: center; /* 子元素垂直居中 */
  height: 300px; /* 父容器需有明确高度 */
  background: #f5f5f5;
}

.child {
  padding: 20px;
  background: #42b983;
}

扩展：若需同时水平居中，可添加 justify-content: center。

2. 绝对定位 + 变换（`transform`）

适用场景：需要脱离文档流的元素（如弹窗），支持不定高元素。
原理：通过绝对定位将元素上移 50%，再用 transform 向上偏移自身高度的 50%。

1
2
3

<div class="parent">
  <div class="child">绝对定位垂直居中</div>
</div>

.parent {
  position: relative; /* 父容器相对定位 */
  height: 300px;
  background: #f5f5f5;
}

.child {
  position: absolute; /* 子元素绝对定位 */
  top: 50%; /* 相对于父容器上移 50% */
  transform: translateY(-50%); /* 自身上移 50% 高度（关键） */
  background: #e74c3c;
  padding: 15px;
}

扩展：若需同时水平居中，可添加 left: 50% 和 transform: translate(-50%, -50%)。

3. 表格布局（`table-cell`）

适用场景：需要兼容旧浏览器（如 IE8），或需垂直居中多行文本。
原理：父容器模拟表格单元格，利用表格的垂直对齐特性。

1
2
3

<div class="parent">
  <div class="child">表格布局垂直居中</div>
</div>

.parent {
  display: table-cell; /* 父容器模拟表格单元格 */
  vertical-align: middle; /* 垂直居中 */
  height: 300px;
  width: 100%;
  background: #f5f5f5;
}

.child {
  background: #9b59b6;
  padding: 10px;
}

4. Grid 网格布局

适用场景：复杂二维布局，需同时控制水平和垂直方向。
原理：父容器启用 Grid 布局，通过 align-items 或 place-items 实现垂直居中。

1
2
3

<div class="parent">
  <div class="child">Grid 垂直居中</div>
</div>

.parent {
  display: grid; /* 父容器开启 Grid 布局 */
  align-items: center; /* 垂直居中 */
  height: 300px;
  background: #f5f5f5;
}

.child {
  background: #3498db;
  padding: 20px;
}

简化写法：place-items: center 可同时实现水平和垂直居中。

5. 已知父元素高度 + 子元素定高（`margin-top` 计算）

适用场景：父元素高度和子元素高度均固定的简单场景。
原理：通过计算 margin-top 为父高与子高差值的一半实现居中。

1
2
3

<div class="parent">
  <div class="child">定高元素垂直居中</div>
</div>

.parent {
  height: 300px; /* 固定父元素高度 */
  background: #f5f5f5;
}

.child {
  height: 100px; /* 固定子元素高度 */
  margin-top: 100px; /* (300px - 100px) / 2 = 100px */
  background: #f39c12;
}

总结

方法	适用场景	优点	兼容性
Flex 布局	所有元素，尤其不定高	灵活简单，支持多元素	IE10+
绝对定位 + transform	脱离文档流元素，不定高	适配悬浮元素	IE9+
表格布局	旧浏览器兼容，多行文本	兼容性好	IE8+
Grid 布局	复杂二维布局	代码简洁，功能强大	IE11+
定高 + margin-top	父与子高度均固定	简单直接	所有浏览器

现代开发优先选择 Flex 布局（简洁灵活），复杂场景可用 Grid 布局，旧浏览器兼容场景考虑表格布局。

8、CSS 中的 position 属性有哪些取值？分别有什么特点？

CSS 的 position 属性用于控制元素在页面中的定位方式，常见取值及特点如下：

1. `static`（默认值）

特点：元素遵循正常的文档流布局，不会被特殊定位。
定位规则：忽略 top、right、bottom、left 和 z-index 属性。
适用场景：大多数默认布局的元素。

1
2
3

.element {
  position: static; /* 默认值，无需显式声明 */
}

2. `relative`（相对定位）

特点：元素相对于自身在文档流中的原始位置进行偏移，不脱离文档流（仍占据原有空间）。
定位规则：
- 通过 top/right/bottom/left 设置偏移量（相对于自身原位置）。
- 会保留元素在文档流中的占位空间，其他元素不会填补其偏移后的空隙。
- 可通过 z-index 控制层级（默认层级高于静态元素）。
适用场景：作为绝对定位元素的参考容器，或微调元素位置。

.element {
  position: relative;
  top: 10px; /* 相对于原位置向下偏移 10px */
  left: 20px; /* 相对于原位置向右偏移 20px */
}

3. `absolute`（绝对定位）

特点：元素完全脱离文档流（不占据原有空间），相对于最近的已定位祖先元素（position 不为 static 的祖先）进行定位。
定位规则：
- 若没有已定位的祖先，会相对于初始包含块（通常是 <html> 或浏览器视口）定位。
- 通过 top/right/bottom/left 设置相对于参考容器的偏移量。
- 可通过 z-index 控制层级，会覆盖普通文档流元素。
适用场景：弹窗、悬浮元素、复杂布局中的精确定位（如导航菜单下拉项）。

.parent {
  position: relative; /* 作为子元素的定位参考 */
}

.child {
  position: absolute;
  top: 50px; /* 距离父元素顶部 50px */
  right: 0; /* 距离父元素右侧 0px */
}

4. `fixed`（固定定位）

特点：元素完全脱离文档流，相对于浏览器视口（viewport）定位，滚动页面时位置保持不变。
定位规则：
- 无论页面如何滚动，元素始终固定在视口的指定位置。
- 通过 top/right/bottom/left 设置相对于视口的偏移量。
- 可通过 z-index 控制层级，不受祖先元素定位影响。
适用场景：固定导航栏、回到顶部按钮、悬浮广告等。

.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* 固定在视口顶部，宽度占满屏幕 */
}

5. `sticky`（粘性定位）

特点：结合了 relative 和 fixed 的特性，元素在滚动到特定阈值前表现为相对定位（在文档流中），超过阈值后表现为固定定位（相对于视口）。
定位规则：
- 需要通过 top/right/bottom/left 设置触发固定定位的阈值（如 top: 0 表示滚动到顶部时固定）。
- 仅在其父元素的滚动范围内生效，超出父元素边界后会跟随父元素滚动。
适用场景：滚动时固定的标题栏、列表分组标题等。

.sticky-header {
  position: sticky;
  top: 0; /* 当元素顶部距离视口顶部为 0 时固定 */
  background: white;
}

总结

取值	是否脱离文档流	定位参考	核心特点	典型场景
`static`	否	无	默认布局，忽略定位属性	普通元素
`relative`	否	自身原位置	偏移但保留占位	微调位置、作为定位容器
`absolute`	是	最近已定位祖先	完全脱离流，精确定位	弹窗、悬浮元素
`fixed`	是	浏览器视口	固定在视口，不随滚动变化	固定导航、回到顶部按钮
`sticky`	部分（滚动到阈值后）	视口 + 父元素	滚动中动态切换定位方式	粘性标题栏

理解 position 的取值差异，是实现复杂布局和交互效果的基础，尤其需要注意 absolute 依赖已定位祖先、sticky 依赖父元素滚动范围等细节。

9、简述 CSS 中的 float 属性的作用及清除浮动的方法

CSS 中的 float 属性用于用于使元素脱离正常文档流，沿着容器的左侧或右侧浮动，允许文本和其他内容环绕它。它主要用于早期的文字环绕图片效果，以及实现多列布局。

一、`float` 属性的作用

脱离文档流：浮动元素会从正常文档流中移除，不再占据原来的空间，但仍会影响其他元素（如文本会环绕它）。

浮动方向：取值包括 left（向左浮动）、right（向右浮动）、none（默认，不浮动）。

<div class="container">
  <img src="image.jpg" class="float-left">
  <p>这段文字会环绕在图片右侧...</p>
</div>

.float-left {
  float: left;
  margin-right: 10px; /* 与文本保持距离 */
}

二、浮动带来的问题

浮动元素会导致父元素高度塌陷：由于浮动元素脱离文档流，父元素无法感知其高度，若父元素没有其他子元素，会呈现高度为 0 的状态，影响后续布局。

三、清除浮动的常用方法

1. 额外标签法（空标签清除）

在浮动元素的父容器末尾添加一个空的块级元素，设置 clear: both。

<div class="parent">
  <div class="float-child">浮动元素</div>
  <!-- 清除浮动的空标签 -->
  <div style="clear: both;"></div>
</div>

.float-child {
  float: left;
  width: 100px;
  height: 100px;
}

特点：简单直接，但会增加无意义的 HTML 标签，影响语义化。

2. 父元素添加 `overflow: hidden` 或 `auto`

给浮动元素的父容器设置 overflow: hidden 或 auto，触发BFC（块级格式化上下文），使父元素能感知浮动元素的高度。

.parent {
  overflow: hidden; /* 或 overflow: auto */
}

.float-child {
  float: left;
}

特点：代码简洁，无额外标签，但可能隐藏超出父容器的内容（如下拉菜单）。

3. 伪元素清除法（推荐）

通过父元素的 ::after 伪元素模拟空标签，清除浮动，不影响语义化。

.parent::after {
  content: ""; /* 必须设置内容 */
  display: block; /* 伪元素设为块级 */
  clear: both; /* 清除左右浮动 */
}

.parent {
  *zoom: 1; /* 兼容 IE6/7 */
}

.float-child {
  float: left;
}

特点：语义化好，无额外标签，是现代开发中最常用的方法。

4. 父元素也设置浮动

将父元素也设置为浮动，使其能包含浮动的子元素。

.parent {
  float: left; /* 父元素浮动 */
  width: 100%; /* 避免宽度塌陷 */
}

.float-child {
  float: left;
}

特点：简单，但可能导致父元素的父容器也出现高度塌陷，需逐层处理，不推荐大范围使用。

总结

float 作用：使元素左右浮动，实现文字环绕或多列布局，但会导致父元素高度塌陷。
清除浮动首选方法：伪元素清除法（::after + clear: both），兼顾语义化和兼容性。
替代方案：现代布局中，Flex 或 Grid 布局已逐渐替代浮动实现多列布局，更简洁且无塌陷问题。

10、CSS 中的 z-index 属性的作用是什么？它的生效条件是什么？

CSS 中的 z-index 属性用于控制元素在垂直于屏幕的 z 轴方向上的堆叠顺序（即视觉上的前后层次），数值越大的元素通常会显示在越上层，覆盖数值较小的元素。

一、`z-index` 的核心作用

解决元素重叠时的显示优先级问题。例如：浮动元素覆盖静态元素、弹窗覆盖页面内容、多层导航菜单的层级关系等。

示例：

.box1 {
  position: absolute;
  z-index: 1; /* 层级较低 */
}

.box2 {
  position: absolute;
  z-index: 2; /* 层级更高，会覆盖 box1 */
}

二、`z-index` 的生效条件

z-index 并非对所有元素都生效，它需要满足以下条件：

元素必须设置了定位（position 不为 static）
只有当元素的 position 属性为 relative、absolute、fixed 或 sticky 时，z-index 才会生效。
⚠️ 注意：position: static（默认值）的元素设置 z-index 无效。
受“堆叠上下文”（Stacking Context）影响
z-index 的数值仅在同一堆叠上下文中有效，不同堆叠上下文之间的层级比较遵循以下规则：
- 每个堆叠上下文是一个独立的“层级容器”，内部元素的 z-index 只在容器内比较。
- 父元素的堆叠上下文层级会影响子元素的显示优先级，即使子元素 z-index 很大，若父元素所在的堆叠上下文层级较低，子元素也可能被其他堆叠上下文的元素覆盖。
常见触发堆叠上下文的情况（除定位元素外）：
- 根元素（<html>）默认形成根堆叠上下文。
- 元素设置 opacity < 1。
- 元素设置 transform 不为 none。
- 元素设置 display: flex 或 grid，且子元素为定位元素。

三、示例说明

<div class="parent1">
  <div class="child1">子元素 1（z-index: 100）</div>
</div>

<div class="parent2">
  <div class="child2">子元素 2（z-index: 10）</div>
</div>

/* parent1 触发了新的堆叠上下文（例如设置了 opacity） */
.parent1 {
  position: relative;
  opacity: 0.9; /* 触发堆叠上下文 */
  z-index: 1; /* 父元素堆叠层级 */
}

.child1 {
  position: absolute;
  z-index: 100; /* 仅在 parent1 的堆叠上下文中有效 */
}

/* parent2 未触发新堆叠上下文 */
.parent2 {
  position: relative;
  z-index: 2; /* 层级高于 parent1 */
}

.child2 {
  position: absolute;
  z-index: 10; /* 虽数值小，但父元素层级更高，最终覆盖 child1 */
}

结果：child2 会覆盖 child1，因为其父元素 parent2 的堆叠层级（z-index: 2）高于 parent1（z-index: 1），即使 child1 的 z-index 数值更大。

总结

作用：控制元素在 z 轴的堆叠顺序，数值越大越可能显示在上方。
生效条件：
1. 元素必须设置 position: relative/absolute/fixed/sticky（非 static）。
2. 仅在同一堆叠上下文内，z-index 数值才具有直接可比性。

理解堆叠上下文是掌握 z-index 的关键，避免因父元素触发新的堆叠上下文而导致子元素层级不符合预期。

11、简述 CSS 中的 Flex 布局的基本概念（容器和项目的属性）

Flex 布局（Flexible Box Layout，弹性盒布局）是一种一维布局模型，通过设置容器和项目的属性，实现灵活的对齐、分布和重排效果。核心思想是让容器能够调节内部项目的宽度、高度和排列顺序，以最佳方式填充可用空间。

一、基本概念

Flex 容器（Flex Container）：设置 display: flex 或 display: inline-flex 的父元素，其所有直接子元素自动成为Flex 项目（Flex Item）。
主轴（Main Axis）：项目默认沿水平方向排列的轴线（可通过 flex-direction 改变方向）。
交叉轴（Cross Axis）：与主轴垂直的轴线（主轴水平时，交叉轴为垂直方向）。

二、Flex 容器的核心属性（控制整体布局）

**flex-direction**：决定主轴方向（项目排列方向）
- row（默认）：主轴水平，项目从左到右排列。
- row-reverse：主轴水平，项目从右到左排列。
- column：主轴垂直，项目从上到下排列。
- column-reverse：主轴垂直，项目从下到上排列。
1
2
3
4
.container {
display: flex;
flex-direction: column; /* 项目垂直排列 */
}
justify-content：控制项目在主轴上的对齐方式
- flex-start（默认）：左对齐（主轴起点）。
- flex-end：右对齐（主轴终点）。
- center：居中对齐。
- space-between：两端对齐，项目间间隔相等。
- space-around：项目两侧间隔相等（总间隔为项目间间隔的 2 倍）。
1
2
3
.container {
justify-content: space-between; /* 主轴上两端对齐 */
}
align-items：控制项目在交叉轴上的对齐方式
- stretch（默认）：项目拉伸至填满容器高度（需项目未设置固定高度）。
- flex-start：交叉轴起点对齐。
- flex-end：交叉轴终点对齐。
- center：交叉轴居中对齐。
- baseline：项目基线（文字底部）对齐。
1
2
3
.container {
align-items: center; /* 交叉轴居中对齐 */
}
**flex-wrap**：控制项目是否换行
- nowrap（默认）：不换行，项目可能被压缩。
- wrap：换行，超出容器宽度时，项目向下换行。
- wrap-reverse：换行，超出时向上换行。
1
2
3
.container {
flex-wrap: wrap; /* 项目超出时换行 */
}
align-content：控制多根轴线（换行后的多行）在交叉轴上的对齐方式（仅当项目换行时有效）
- 取值与 justify-content 类似（flex-start、flex-end、center、space-between 等）。

三、Flex 项目的核心属性（控制单个项目）

**flex-grow**：项目的放大比例（默认 0，即不放大）
- 若所有项目的 flex-grow 为 1，则等分剩余空间。
- 若某项目为 2，其他为 1，则该项目占据的剩余空间是其他项目的 2 倍。
1
2
3
.item {
flex-grow: 1; /* 所有项目等分剩余空间 */
}
**flex-shrink**：项目的缩小比例（默认 1，即空间不足时会缩小）
- 设为 0 时，项目不缩小（即使空间不足也保持原宽）。
1
2
3
.item {
flex-shrink: 0; /* 不缩小 */
}
**flex-basis**：项目在主轴上的初始尺寸（默认 auto，即项目自身尺寸）
- 可设为具体数值（如 200px），优先级高于项目的 width/height。
**flex**：flex-grow、flex-shrink、flex-basis 的简写（推荐使用）
- 常用值：flex: 1（等价于 1 1 0%，适合等分空间）；flex: auto（等价于 1 1 auto）。
**align-self**：单个项目覆盖容器的 align-items 设置，单独指定自身在交叉轴的对齐方式
- 取值与 align-items 相同，还可设为 auto（继承容器的 align-items）。
1
2
3
.item-special {
align-self: flex-end; /* 该项目在交叉轴终点对齐 */
}
**order**：控制项目的排列顺序（默认 0，数值越小越靠前）
- 可设为负数（如 -1 会排在默认项目之前）。

四、总结

容器属性：控制整体布局方向（flex-direction）、主轴对齐（justify-content）、交叉轴对齐（align-items）、换行（flex-wrap）等。
项目属性：控制单个项目的伸缩（flex）、对齐（align-self）、顺序（order）等。

Flex 布局的优势在于：无需浮动即可实现水平/垂直居中、自适应布局和响应式设计，是现代前端面试中最常用的布局方案之一。

12、Flex 布局中如何实现项目的水平均匀分布？如何实现项目的垂直对齐？

在 Flex 布局中，实现项目的水平均匀分布和垂直对齐主要通过容器的核心属性控制，操作直观且灵活，具体方法如下：

一、实现项目的水平均匀分布

水平方向对应 Flex 容器的主轴（默认水平方向，可通过 flex-direction 调整），通过容器的 justify-content 属性实现均匀分布，常用场景及取值：

1. 两端对齐，中间间隔相等（最常用）

使用 justify-content: space-between，第一个项目靠主轴起点，最后一个项目靠主轴终点，中间项目间隔均匀。

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

.container {
  display: flex;
  justify-content: space-between; /* 水平均匀分布（两端对齐） */
  width: 100%;
  padding: 20px;
  background: #f0f0f0;
}

.item {
  width: 100px;
  height: 60px;
  background: #42b983;
}

2. 项目两侧间隔相等（环绕分布）

使用 justify-content: space-around，每个项目左右两侧的间隔相同，项目之间的间隔是项目与容器边缘间隔的 2 倍。

.container {
  display: flex;
  justify-content: space-around; /* 水平均匀分布（环绕间隔） */
}

3. 所有间隔完全相等（包括边缘）

使用 justify-content: space-evenly，项目之间的间隔与项目到容器边缘的间隔完全一致（注意：IE 浏览器不支持）。

.container {
  display: flex;
  justify-content: space-evenly; /* 所有间隔相等 */
}

二、实现项目的垂直对齐

垂直方向对应 Flex 容器的交叉轴（与主轴垂直），通过容器属性或项目属性控制：

1. 控制所有项目的垂直对齐（容器属性 `align-items`）

align-items: center：所有项目在交叉轴居中对齐（最常用的垂直居中方案）。
align-items: flex-start：所有项目靠交叉轴起点对齐（顶部对齐）。
align-items: flex-end：所有项目靠交叉轴终点对齐（底部对齐）。
align-items: stretch：项目拉伸至填满容器高度（默认值，需项目未设置固定高度）。

示例（垂直居中）：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px; /* 必须设置容器高度，否则无法体现垂直效果 */
  background: #f0f0f0;
}

2. 控制单个项目的垂直对齐（项目属性 `align-self`）

单个项目可通过 align-self 覆盖容器的 align-items 设置，单独指定垂直对齐方式（取值同 align-items）。

示例（单个项目底部对齐）：

.container {
  display: flex;
  align-items: center; /* 大部分项目垂直居中 */
  height: 300px;
  background: #f0f0f0;
}

.item-special {
  align-self: flex-end; /* 该项目单独底部对齐 */
}

总结

水平均匀分布：通过 justify-content 实现，根据需求选择 space-between（两端对齐）、space-around（环绕间隔）或 space-evenly（全间隔相等）。
垂直对齐：
- 所有项目：用容器的 align-items（推荐 center 实现垂直居中）。
- 单个项目：用项目的 align-self 单独设置。

Flex 布局通过这两个核心属性，可轻松实现各种复杂的对齐效果，无需依赖浮动或定位，是现代响应式布局的首选方案。

14、CSS 中的 Grid 布局与 Flex 布局有什么区别？使用场景分别是什么？

CSS 中的 Grid 布局和 Flex 布局都是现代前端布局的重要方案，但它们的设计理念和适用场景有显著区别：

一、核心区别

特性	Flex 布局	Grid 布局
维度	一维布局（要么沿行，要么沿列）	二维布局（同时控制行和列）
布局思路	基于“容器-项目”的关系，通过主轴和交叉轴控制	基于“网格容器-网格项”的关系，通过行和列的轨道（track）控制
对齐方式	需区分主轴（`justify-content`）和交叉轴（`align-items`）	可直接针对行（`align-items`）和列（`justify-items`）设置，或整体控制（`place-items`）
灵活性	适合动态调整项目大小和顺序，自适应能力强	适合精确控制项目在二维空间中的位置和尺寸

二、详细对比

1. 维度差异（最核心区别）

Flex 布局：只能处理一维布局，即要么沿水平方向（行）排列，要么沿垂直方向（列）排列。即使换行（flex-wrap: wrap），本质上还是按行或列的一维逻辑处理。

示例：用 Flex 实现三列布局，本质是控制项目在主轴（水平方向）上的排列：
1
2
3
4
5
6
7
.container {
display: flex;
gap: 10px; /* 项目间距 */
}
.item {
flex: 1; /* 等分宽度 */
}
Grid 布局：原生支持二维布局，可以同时定义行和列的尺寸，直接控制项目在网格中的行/列位置。

示例：用 Grid 实现 2 行 2 列的网格，直接定义行列轨道：
1
2
3
4
5
6
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* 2 列，各占一半 */
grid-template-rows: 100px 100px; /* 2 行，各高 100px */
gap: 10px;
}

2. 布局控制方式

Flex 布局：通过容器的 flex-direction 确定主轴方向，再用 justify-content（主轴对齐）和 align-items（交叉轴对齐）控制项目排列，项目的大小主要通过 flex-grow/flex-shrink 动态调整。
Grid 布局：通过 grid-template-columns 和 grid-template-rows 定义网格轨道（行/列的尺寸），项目通过 grid-column/grid-row 确定在网格中的位置（如跨几行几列），对齐方式更直接（如 place-items: center 可同时实现水平和垂直居中）。

3. 适用场景

Flex 布局适合：
- 线性排列的内容（如导航栏、列表、卡片横向/纵向排列）。
- 内容需要动态适应空间（如自适应的按钮组、搜索框+按钮组合）。
- 对齐要求简单（如水平居中、垂直居中、两端对齐）。
- 响应式布局中需要灵活换行的场景（如移动端的流式布局）。
典型案例：导航菜单、用户信息卡片（头像+文字垂直居中）、表单按钮组。
Grid 布局适合：
- 二维网格结构（如仪表盘、图片画廊、卡片网格）。
- 项目需要精确控制位置和跨度（如某项目跨 2 行 3 列）。
- 整体布局框架（如页面的头部、侧边栏、主内容、底部的区域划分）。
- 不规则布局（如某些项目在网格中占据非连续位置）。
典型案例：电商商品列表（多行多列网格）、后台管理系统的仪表盘（多模块网格分布）、杂志式排版（图文混排的复杂布局）。

三、总结

Flex 是“一维布局工具”：擅长处理同一行或同一列的元素排列，灵活度高，适合组件级别的布局。
Grid 是“二维布局工具”：擅长处理行和列同时存在的网格结构，精确度高，适合页面级别的整体布局。

实际开发中，两者并非互斥关系，常结合使用（如用 Grid 搭建页面框架，内部组件用 Flex 布局）。选择的核心依据是：布局是一维线性的还是二维网格状的。

14、简述 CSS 中的响应式布局的实现方式（如媒体查询、rem、vw/vh）

响应式布局是指网页能根据不同设备（如手机、平板、桌面电脑）的屏幕尺寸自动调整布局和样式，提供一致的用户体验。常见实现方式如下：

1. 媒体查询（Media Queries）

原理：通过 @media 规则根据设备的屏幕宽度、高度、分辨率等特性，应用不同的 CSS 样式。
核心语法：

/* 基础样式（默认适配移动设备） */
.container {
  width: 100%;
  padding: 10px;
}

/* 屏幕宽度 ≥ 768px 时（平板） */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
    padding: 20px;
  }
}

/* 屏幕宽度 ≥ 1200px 时（桌面） */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
    padding: 30px;
  }
}

特点：直接针对不同设备尺寸编写样式，灵活性高，是响应式布局的基础。
常用断点：移动设备（<768px）、平板（768px-1199px）、桌面（≥1200px）。

2. 相对单位（rem、em）

原理：使用相对长度单位替代固定像素（px），使元素尺寸随基准值动态变化。

rem：相对于根元素（<html>）的字体大小（font-size）。
示例：

/* 根元素基准值（默认 16px，此处设为 10px 方便计算） */
html {
  font-size: 10px; /* 1rem = 10px */
}

/* 不同屏幕下调整基准值 */
@media (min-width: 768px) {
  html {
    font-size: 12px; /* 1rem = 12px（平板） */
  }
}

/* 元素尺寸用 rem 定义 */
.box {
  width: 20rem; /* 移动端 200px，平板 240px */
  font-size: 1.6rem; /* 移动端 16px，平板 19.2px */
}

em：相对于父元素的字体大小（嵌套时需注意层级影响，不如 rem 常用）。

特点：通过修改根元素基准值，实现整体尺寸等比例缩放，适合适配不同屏幕密度。

3. 视口单位（vw/vh）

原理：基于视口（浏览器可见区域）的百分比定义尺寸：

vw：视口宽度的 1%（1vw = 视口宽度 × 0.01）。
vh：视口高度的 1%（1vh = 视口高度 × 0.01）。
vmin/vmax：取视口宽高的最小值/最大值的 1%。

示例：

/* 元素宽度始终为视口宽度的 50% */
.box {
  width: 50vw;
}

/* 字体大小随视口宽度变化（最大不超过 24px） */
.title {
  font-size: 5vw;
  max-font-size: 24px;
}

/* 全屏高度的容器 */
.full-screen {
  height: 100vh;
}

特点：直接与视口尺寸绑定，无需媒体查询即可实现自适应，适合全屏布局或动态字体。

4. 弹性布局（Flex）与网格布局（Grid）

原理：利用 Flex 或 Grid 的自适应特性，使容器内的元素自动调整排列方式和尺寸。

Flex 示例（响应式导航）：

.nav {
  display: flex;
  flex-wrap: wrap; /* 空间不足时自动换行 */
  justify-content: space-between;
}

.nav-item {
  flex: 1 0 120px; /* 最小宽度 120px，剩余空间等分 */
}

Grid 示例（响应式卡片网格）：

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自动适配列数，最小宽度 250px */
  gap: 20px;
}

特点：无需手动计算尺寸，容器自动分配空间，是现代响应式布局的首选方案。

5. 图片与媒体适配

响应式图片：使用 <picture> 标签或 srcset 属性加载不同尺寸的图片：

<img 
  src="small.jpg" 
  srcset="medium.jpg 768w, large.jpg 1200w" 
  sizes="(min-width: 768px) 750px, 100vw"
  alt="响应式图片"
>

流体图片：设置 max-width: 100% 确保图片不超出容器：

img {
  max-width: 100%;
  height: auto; /* 保持宽高比 */
}

总结

方式	核心思想	适用场景
媒体查询	按屏幕尺寸应用不同样式	整体布局调整、组件样式适配
rem/em	基于基准值的相对单位	字体大小、组件尺寸的等比例缩放
vw/vh	基于视口的百分比单位	全屏布局、动态字体、自适应容器
Flex/Grid	容器自动分配空间	响应式列表、网格、导航等组件布局

实际开发中，通常结合多种方式（如“媒体查询 + Flex + rem”）实现灵活的响应式效果，核心目标是让网页在任何设备上都保持良好的可读性和交互性。

15、CSS 中的媒体查询（Media Query）的基本语法及作用是什么？

CSS 中的媒体查询（Media Query）是实现响应式布局的核心技术之一，它允许根据设备的特性（如屏幕宽度、高度、分辨率等）为不同场景应用特定的 CSS 样式。

一、媒体查询的基本语法

媒体查询的核心语法由 @media 规则、媒体类型和条件表达式组成，基本结构如下：

/* 语法结构 */
@media [媒体类型] and (条件表达式) {
  /* 当条件满足时应用的样式 */
  选择器 {
    属性: 值;
  }
}

1. 媒体类型（可选）

指定样式适用的设备类型，常见值：

all：所有设备（默认值，可省略）。
screen：屏幕设备（如电脑、手机、平板）。
print：打印设备或打印预览模式。

示例：

/* 仅对屏幕设备生效 */
@media screen and (min-width: 768px) { ... }

/* 仅对打印设备生效 */
@media print {
  body { font-size: 12pt; } /* 打印时字体调整 */
}

2. 条件表达式（核心）

通过 and 连接一个或多个条件，检测设备的具体特性，常见条件：

宽度相关：min-width（最小宽度）、max-width（最大宽度）。
高度相关：min-height、max-height。
方向：orientation: portrait（竖屏，高度 ≥ 宽度）、orientation: landscape（横屏，宽度 > 高度）。
分辨率：min-resolution: 2dppx（高清屏，如 Retina）。

示例：

/* 屏幕宽度 ≥ 768px 且 ≤ 1199px 时生效 */
@media (min-width: 768px) and (max-width: 1199px) { ... }

/* 竖屏时生效 */
@media (orientation: portrait) { ... }

3. 逻辑运算符

and：同时满足多个条件。
,（逗号）：满足任意一个条件（相当于“或”）。
not：否定整个媒体查询（不常用）。

示例：

1 2	/* 宽度 < 768px 或打印设备时生效 */ @media (max-width: 767px), print { ... }

二、媒体查询的作用

实现响应式布局
根据不同屏幕尺寸调整页面结构，例如：

移动端：单列布局，隐藏次要内容。
平板：双列布局，调整字体大小。
桌面端：多列布局，展示完整内容。

示例（响应式导航）：

/* 默认样式（移动端） */
.nav {
  flex-direction: column; /* 垂直排列 */
}

/* 屏幕 ≥ 768px 时（平板及以上） */
@media (min-width: 768px) {
  .nav {
    flex-direction: row; /* 水平排列 */
  }
}

优化特定设备体验
- 为打印设备设置黑白、无背景的样式。
- 为横屏/竖屏切换调整布局。
- 为高清屏幕提供高分辨率图片。
渐进式增强
先实现基础样式（适配移动设备），再通过媒体查询为大屏幕添加更丰富的样式，符合“移动优先”原则。

三、使用注意事项

移动优先 vs 桌面优先
- 移动优先：先写移动端样式，再用 min-width 为大屏幕添加样式（推荐）。
- 桌面优先：先写桌面样式，再用 max-width 为小屏幕降级样式。

引入外部样式表
可在 <link> 标签中通过 media 属性加载特定样式表：

1 2	<link rel="stylesheet" href="mobile.css" media="(max-width: 767px)"> <link rel="stylesheet" href="desktop.css" media="(min-width: 1200px)">

视口设置
移动端需在 <head> 中添加视口元标签，确保媒体查询正常工作：
1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

总结

基本语法：@media [媒体类型] and (条件) { 样式 }，通过条件检测设备特性。
核心作用：根据不同设备特性应用不同样式，实现响应式布局，优化多设备体验。
最佳实践：采用移动优先策略，结合 min-width 断点（如 768px、1200px）设计适配方案。

媒体查询是构建跨设备兼容网页的基础，常与 Flex、Grid 等布局技术结合使用。

16、什么是 CSS 预处理器（如 Sass、Less）？它们有哪些优势？

CSS 预处理器（CSS Preprocessor）是一种扩展 CSS 功能的工具，它引入了编程语言的特性（如变量、函数、嵌套等），允许开发者用更高效、可维护的方式编写样式代码，最终通过编译工具转换为标准的 CSS 供浏览器使用。

常见的 CSS 预处理器包括 Sass（SCSS 是其语法扩展）、Less、Stylus 等，它们的核心目标是解决原生 CSS 的局限性。

预处理器的核心优势

变量（Variables）
允许定义可复用的变量（如颜色、尺寸、字体），一处修改，全局生效，避免重复代码。

Sass 示例：

$primary-color: #42b983; // 定义变量
$base-font-size: 16px;

.button {
  background: $primary-color;
  font-size: $base-font-size;
}

编译后 CSS：

.button {
  background: #42b983;
  font-size: 16px;
}

嵌套（Nesting）
支持选择器嵌套，直观反映 HTML 结构的层级关系，减少代码冗余，提高可读性。

Sass 示例：

.nav {
  width: 100%;
  
  > li { // 直接子元素
    float: left;
    
    a { // 后代元素
      color: #333;
      &:hover { // 伪类嵌套（& 代表父选择器）
        color: red;
      }
    }
  }
}

编译后 CSS：

.nav { width: 100%; }
.nav > li { float: left; }
.nav > li a { color: #333; }
.nav > li a:hover { color: red; }

混合（Mixins）
封装可复用的样式片段（如动画、兼容代码），支持参数传递，类似函数。

Less 示例：

// 定义带参数的混合
.border-radius(@radius: 4px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.box {
  .border-radius(8px); // 调用混合并传参
}

编译后 CSS：

.box {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

继承（Inheritance）
允许一个选择器继承另一个选择器的样式，减少代码重复，比混合更轻量。

Sass 示例：

.base-button {
  padding: 10px 20px;
  border: none;
}

.primary-button {
  @extend .base-button; // 继承基础样式
  background: blue;
}

编译后 CSS：

.base-button, .primary-button {
  padding: 10px 20px;
  border: none;
}
.primary-button {
  background: blue;
}

模块化（Modules）
支持将样式拆分到多个文件（如 _header.scss、_footer.scss），通过 @import 合并，便于大型项目的代码组织。
- Sass 示例：
  1
  2
  3
  // 导入其他文件
  @import 'variables'; // 变量文件
  @import 'components/button'; // 组件样式

运算与函数
支持数学运算（加减乘除）和内置函数（如颜色处理、字符串操作），动态生成样式。

Sass 示例：

$base-width: 100px;
.container {
  width: $base-width * 2; // 计算宽度
}
.text {
  color: lighten(#42b983, 10%); // 颜色变浅
}

总结

CSS 预处理器通过引入变量、嵌套、混合等特性，解决了原生 CSS 代码冗余、维护困难、复用性低的问题，尤其适合大型项目开发。其优势可概括为：

提高开发效率：减少重复代码，简化样式逻辑。
增强可维护性：模块化组织，变量和继承使修改更便捷。
扩展 CSS 能力：支持编程特性，实现动态样式生成。

使用时需通过工具（如 sass-loader、less-loader）将预处理器代码编译为浏览器可识别的 CSS，但这一过程可通过构建工具（如 Webpack）自动化完成，几乎不影响开发流程。

17、CSS 中的变量（–var）如何定义和使用？有什么作用？

CSS 变量（也称为自定义属性，Custom Properties）是 CSS 原生支持的变量机制，允许在样式表中定义可复用的值，并在整个文档中引用。与预处理器（如 Sass）的变量不同，CSS 变量是浏览器原生解析的，支持动态修改（通过 JavaScript）。

一、CSS 变量的定义与使用

1. 定义变量

变量需以 -- 为前缀，通常定义在**根伪类 :root**（代表 <html> 元素，作用域全局）或特定选择器中（作用域局部）。

/* 全局变量（在 :root 中定义，整个文档可访问） */
:root {
  --primary-color: #42b983; /* 主色调 */
  --base-font-size: 16px;   /* 基础字体大小 */
  --spacing: 20px;          /* 通用间距 */
}

/* 局部变量（仅在 .card 及其子元素中生效） */
.card {
  --card-bg: #f5f5f5; /* 卡片背景色 */
}

2. 使用变量

通过 var() 函数引用变量，语法为 var(变量名, 默认值)（默认值可选，当变量未定义时使用）。

/* 使用全局变量 */
body {
  font-size: var(--base-font-size);
  color: #333;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing);
  /* 引用时可叠加计算（需配合 calc()） */
  margin-top: calc(var(--spacing) / 2);
}

/* 使用局部变量 */
.card {
  background: var(--card-bg);
  padding: var(--spacing); /* 可同时使用全局变量 */
}

/* 带默认值的引用（变量未定义时生效） */
.box {
  border-color: var(--border-color, #ddd); /* 若 --border-color 未定义，使用 #ddd */
}

二、CSS 变量的核心作用

减少代码冗余，提高可维护性
对于重复使用的值（如主题色、间距、字体大小），只需定义一次，多处引用。修改时只需更新变量值，所有引用处自动生效，避免手动替换的遗漏。

示例：修改全局主色调，所有使用 --primary-color 的元素会同步更新。

支持动态样式切换
CSS 变量可通过 JavaScript 实时修改，实现无需重新加载页面的动态样式变化（如主题切换、响应式调整）。

1
2
3

// 切换为深色主题
document.documentElement.style.setProperty('--primary-color', '#2c3e50');
document.documentElement.style.setProperty('--card-bg', '#34495e');

简化响应式布局
结合媒体查询，可在不同屏幕尺寸下重新定义变量值，统一控制布局变化。

:root {
  --column-count: 2; /* 默认 2 列 */
}

@media (min-width: 768px) {
  :root {
    --column-count: 4; /* 大屏时 4 列 */
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--column-count), 1fr); /* 动态列数 */
}

作用域隔离
局部变量仅在定义它的选择器及其子元素中生效，避免全局污染，适合组件化开发。

/* 组件 A 的变量 */
.component-a {
  --theme-color: red;
}

/* 组件 B 的变量（不影响组件 A） */
.component-b {
  --theme-color: blue;
}

三、注意事项

大小写敏感：--color 和 --Color 是两个不同的变量。
继承性：子元素会继承父元素的变量，若子元素有同名变量则覆盖。
兼容性：支持所有现代浏览器（IE 完全不支持），需考虑兼容场景的降级方案。
不能直接用于媒体查询：变量无法作为媒体查询的条件（如 @media (min-width: var(--breakpoint)) 无效）。

总结

CSS 变量的核心价值在于：原生支持的动态样式复用机制。相比预处理器变量，它无需编译步骤，且支持运行时修改，特别适合需要动态调整样式的场景（如主题切换、用户自定义设置）。在现代前端面试中，CSS 变量常与组件化、响应式设计结合，大幅提升样式代码的可维护性和灵活性。

18、简述 CSS 中的过渡（transition）和动画（animation）的区别及使用场景

CSS 中的过渡（transition）和动画（animation）都用于实现元素的动态效果，但它们的实现方式、控制粒度和适用场景有显著区别：

一、核心区别

特性	过渡（transition）	动画（animation）
触发方式	需要通过用户行为或状态变化触发（如 `hover`、`click`、`focus` 等）	无需触发，可自动执行（也可通过类名等控制）
关键帧	仅支持从“初始状态”到“结束状态”的过渡，中间状态由浏览器自动计算	可通过 `@keyframes` 定义多个关键帧，精确控制每一步的样式
循环性	一次触发执行一次，无法直接循环（需配合 JS 重新触发）	支持通过 `animation-iteration-count` 设置循环次数（包括无限循环）
控制能力	控制简单（仅能定义过渡时长、延迟、速度曲线）	控制精细（可定义播放方向、暂停/继续、动画填充模式等）

二、详细说明及使用场景

1. 过渡（transition）

原理：当元素的 CSS 属性发生变化时，平滑地从初始值过渡到目标值，默认瞬间变化的属性会变得有过程感。

基本语法：

.element {
  /* 过渡的属性（all 表示所有可过渡属性） */
  transition-property: width, background;
  /* 过渡时长 */
  transition-duration: 0.3s;
  /* 过渡延迟时间 */
  transition-delay: 0.1s;
  /* 速度曲线（如 ease 缓进缓出、linear 匀速） */
  transition-timing-function: ease;
  
  /* 简写：property duration timing-function delay */
  transition: all 0.3s ease 0.1s;
}

/* 触发过渡（如 hover 状态） */
.element:hover {
  width: 300px;
  background: #42b983;
}

适用场景：

简单的状态变化动画（如 hover 时的按钮变色、元素缩放）。
由用户交互触发的一次性过渡效果（如点击后菜单展开/收起）。
样式变化较少的场景（仅需定义开始和结束状态）。

示例：按钮悬停时颜色渐变、输入框聚焦时边框变化、卡片 hover 时轻微上浮。

2. 动画（animation）

原理：通过 @keyframes 定义一系列关键帧（关键样式），元素按照关键帧自动执行动画，支持更复杂的时序控制。

基本语法：

/* 定义关键帧 */
@keyframes fadeInMove {
  0% { /* 初始状态 */
    opacity: 0;
    transform: translateX(0);
  }
  50% { /* 中间状态 */
    opacity: 0.5;
    transform: translateX(50px);
  }
  100% { /* 结束状态 */
    opacity: 1;
    transform: translateX(100px);
  }
}

/* 应用动画 */
.element {
  /* 绑定关键帧 */
  animation-name: fadeInMove;
  /* 动画时长 */
  animation-duration: 2s;
  /* 循环次数（infinite 表示无限循环） */
  animation-iteration-count: infinite;
  /* 播放方向（normal 正向、reverse 反向、alternate 交替） */
  animation-direction: alternate;
  /* 动画结束后保持的状态（forwards 保持最后一帧） */
  animation-fill-mode: forwards;
  
  /* 简写：name duration timing-function delay iteration-count direction fill-mode */
  animation: fadeInMove 2s ease 0.5s infinite alternate forwards;
}

适用场景：

复杂的自动动画（如加载动画、轮播图切换、页面进入/退出动画）。
需要循环执行的动画（如loading spinner、脉冲效果）。
需精确控制中间状态的动画（如多步骤的位移+变色+缩放组合效果）。

示例：页面加载时的元素入场动画、无限旋转的加载图标、进度条动画。

三、总结

过渡（transition）：适合简单、由交互触发的一次性状态变化，代码简洁，控制简单。
动画（animation）：适合复杂、自动执行或需要循环的多步骤动画，控制精细，功能更强大。

实际开发中，简单交互效果（如 hover）优先用 transition，复杂时序动画（如加载动画）用 animation，两者也可结合使用（如用 transition 控制动画的启动/停止）。

19、CSS 中如何实现元素的隐藏？display:none 和 visibility:hidden 有什么区别？

在 CSS 中，实现元素隐藏的常见方法有 display: none、visibility: hidden 以及 opacity: 0 等，其中 display: none 和 visibility: hidden 是最常用的两种，它们的核心区别在于是否保留元素的布局空间。

一、元素隐藏的常用方法

display: none
完全移除元素，使其在页面中彻底消失，不占据任何布局空间。
1
2
3
.hidden {
display: none;
}
visibility: hidden
隐藏元素，但保留元素在布局中占据的空间（即元素仍会影响其他元素的排列）。
1
2
3
.invisible {
visibility: hidden;
}
其他方法
- opacity: 0：元素透明度为 0，视觉上不可见，但仍占据空间且可交互（如点击）。
- position: absolute; left: -9999px：将元素移出可视区域，不影响布局但仍存在于文档流中。

二、`display: none` 与 `visibility: hidden` 的核心区别

特性	`display: none`	`visibility: hidden`
布局空间	不保留，元素完全从布局中移除，其他元素会填补其位置	保留，元素仍占据原有空间，不影响其他元素排列
子元素继承	子元素会被一同隐藏（无法单独显示子元素）	子元素可通过设置 `visibility: visible` 单独显示
事件交互	元素无法触发任何事件（如点击、hover）	元素无法触发事件（即使占据空间）
性能影响	会触发页面重排（reflow），性能消耗较大	仅触发重绘（repaint），性能消耗较小
动画兼容性	无法与过渡/动画配合（属性值突变）	可与过渡/动画配合（支持平滑显示/隐藏）

三、示例说明

<div class="container">
  <div class="box1">正常元素</div>
  <div class="box2 hidden">display: none</div>
  <div class="box3 invisible">visibility: hidden</div>
  <div class="box4">正常元素</div>
</div>

.box1, .box2, .box3, .box4 {
  width: 100px;
  height: 50px;
  margin: 10px;
  background: #42b983;
}

.hidden { display: none; }
.invisible { visibility: hidden; }

效果：

.box2（display: none）完全消失，.box4 会向上移动填补其位置。
.box3（visibility: hidden）不可见，但仍占据空间，.box4 不会向上移动。

四、使用场景选择

**用 display: none**：需要彻底移除元素，且不希望其占据布局空间（如条件性渲染的弹窗、切换标签页时隐藏的内容）。
**用 visibility: hidden**：需要隐藏元素但保留其布局位置（如表单验证错误提示的临时隐藏、轮播图中未激活的幻灯片）。

总结

display: none 是“物理移除”（不占空间），visibility: hidden 是“视觉隐藏”（保留空间）。选择时需根据是否需要维持布局结构、是否影响其他元素排列来决定。

20、CSS 中的 opacity 属性和 rgba () 函数有什么区别？

CSS 中的 opacity 属性和 rgba() 函数都能实现透明度效果，但它们的作用机制和适用场景有明显区别，主要体现在影响范围和继承特性上：

一、核心区别

特性	`opacity` 属性	`rgba()` 函数
作用对象	作用于整个元素及内部所有内容（包括文本、子元素、边框等）	仅作用于单个 CSS 属性（如 `background`、`color` 等），不影响其他部分
子元素继承性	子元素会继承父元素的透明度，且无法单独抵消（叠加生效）	不影响子元素，子元素样式完全独立（无继承）
透明度计算方式	取值范围 `0~1`（0 完全透明，1 完全不透明），作用于元素整体	第四个参数控制透明度（`0~1`），仅影响当前属性

二、示例说明

<!-- opacity 示例 -->
<div class="box opacity-demo">
  父元素（opacity: 0.5）
  <div class="child">子元素（无法抵消透明度）</div>
</div>

<!-- rgba 示例 -->
<div class="box rgba-demo">
  父元素（rgba 背景）
  <div class="child">子元素（不受影响）</div>
</div>

.box {
  width: 200px;
  height: 150px;
  padding: 10px;
  margin: 10px;
}

/* opacity 作用于整个元素 */
.opacity-demo {
  background: #42b983;
  opacity: 0.5; /* 整个元素（包括内容和子元素）都透明 */
}

/* rgba 仅作用于背景属性 */
.rgba-demo {
  background: rgba(66, 185, 131, 0.5); /* 仅背景透明 */
}

.child {
  background: white;
  padding: 5px;
}

效果差异：

opacity-demo 中，父元素的背景、文字和子元素全部呈现 50% 透明度（子元素无法单独恢复不透明）。
rgba-demo 中，只有父元素的背景是透明的，文字和子元素保持完全不透明。

三、使用场景

opacity：适合需要元素整体透明的场景，如：
- 元素的淡入淡出动画（配合 transition）。
- 加载状态的半透明遮罩层（覆盖整个元素区域）。
rgba()：适合需要局部透明的场景，如：
- 半透明背景上的清晰文字（避免文字同时变透明）。
- 单个属性的透明效果（如边框、阴影的透明度）。

总结

opacity 是“整体透明开关”，会影响元素及所有内容；rgba() 是“局部透明画笔”，仅作用于单个属性且不影响子元素。实际开发中，根据是否需要保留子元素的不透明性选择合适方案。

21、简述 CSS 中的 BFC（块级格式化上下文）的概念及触发条件

BFC（Block Formatting Context，块级格式化上下文）是 CSS 中一种渲染机制，它是一个独立的渲染区域，规定了内部块级元素的布局规则，且与外部元素互不影响。

一、BFC 的核心特性

内部块级元素垂直排列：BFC 内的元素会在垂直方向上一个接一个地放置。
边距折叠隔离：BFC 内部元素之间的垂直外边距（margin）会发生折叠，但与 BFC 外部的元素不会产生边距折叠。
独立容器：BFC 是一个隔离的容器，内部元素的布局不会影响外部元素，反之亦然。
包含浮动元素：BFC 会包含其内部的浮动元素，避免父元素因浮动导致的高度塌陷问题。
阻止外部浮动影响：BFC 不会被外部浮动元素覆盖。

二、触发 BFC 的条件（满足任一即可）

根元素：<html> 标签默认创建 BFC。
浮动元素：float 属性值为 left 或 right（不为 none）。
定位元素：position 为 absolute 或 fixed。
overflow 不为 visible：overflow 属性值为 hidden、auto 或 scroll。
弹性/网格容器：display 为 flex、inline-flex、grid 或 inline-grid（容器本身会创建 BFC）。
表格相关元素：display 为 table-cell（表格单元格）、table-caption 等。
其他特殊值：display 为 flow-root（CSS3 新增，专门用于创建 BFC，无副作用）。

三、BFC 的典型应用

解决父元素高度塌陷：
当子元素设置浮动时，父元素若未设置高度会塌陷，触发父元素的 BFC 可包含浮动元素，使其高度被正确计算。
1
2
3
4
5
6
7
8
.parent {
overflow: hidden; /* 触发 BFC */
}
.child {
float: left;
width: 100px;
height: 100px;
}
阻止边距折叠：
两个相邻元素的垂直 margin 会折叠为较大值，将其中一个元素放入 BFC 中可避免这种情况。
1
2
3
4
<div class="bfc">
<p style="margin: 20px 0;">元素1</p>
</div>
<p style="margin: 20px 0;">元素2</p>
1
2
3
.bfc {
overflow: hidden; /* 触发 BFC，隔离内部 margin */
}
此时两个 p 标签的 margin 不会折叠（总间距为 40px，而非 20px）。

阻止浮动元素覆盖：
非浮动元素可能被浮动元素覆盖，将非浮动元素触发 BFC 可使其不被覆盖。

.float {
  float: left;
  width: 100px;
}
.normal {
  overflow: hidden; /* 触发 BFC，避免被浮动元素覆盖 */
}

总结

BFC 是 CSS 中重要的渲染机制，核心作用是创建独立的布局容器，隔离内部与外部的布局影响。通过触发 BFC，可解决浮动高度塌陷、边距折叠、元素覆盖等常见布局问题。其中，overflow: hidden 和 display: flow-root 是最常用的触发方式（flow-root 无副作用，推荐优先使用）。

22、BFC 有哪些应用场景（如解决浮动塌陷、margin 重叠）？

BFC（块级格式化上下文）作为 CSS 中的独立渲染区域，其“隔离性”和“包含性”使其能解决多种常见布局问题，主要应用场景如下：

1. 解决父元素因浮动导致的高度塌陷

问题：当子元素设置 float 后，会脱离文档流，导致父元素无法感知子元素高度，出现高度为 0 的“塌陷”。
原理：BFC 会包含内部所有浮动元素，强制计算包含浮动后的正确高度。
示例：

1
2
3

<div class="parent">
  <div class="child"></div> <!-- 浮动元素 -->
</div>

.parent {
  /* 触发 BFC，包含浮动元素 */
  overflow: hidden; /* 或 display: flow-root（无副作用） */
  border: 2px solid #333;
}

.child {
  float: left;
  width: 100px;
  height: 100px;
  background: #42b983;
}

效果：父元素高度会自动适应子元素的高度，边框完整包裹子元素。

2. 阻止垂直方向的 margin 重叠（边距折叠）

问题：两个相邻的块级元素（或父子元素）在垂直方向的 margin 会重叠，最终取较大值（而非相加）。
原理：BFC 是独立容器，内部元素的 margin 不会与外部元素的 margin 发生重叠。
示例（解决相邻元素 margin 重叠）：

<div class="box1">元素1</div>
<div class="bfc-container">
  <div class="box2">元素2</div>
</div>

.box1, .box2 {
  margin: 20px 0; /* 各自设置 20px 上下边距 */
  height: 50px;
  background: #42b983;
}

.bfc-container {
  overflow: hidden; /* 触发 BFC，隔离内部 margin */
}

效果：元素1和元素2的间距为 40px（20px + 20px），而非重叠后的 20px。

3. 阻止浮动元素覆盖其他元素

问题：浮动元素会脱离文档流，可能覆盖后续的非浮动元素（如文字环绕图片时，图片覆盖文字区域）。
原理：BFC 区域不会与外部浮动元素重叠，可保持自身独立空间。
示例：

1 2	<div class="float-box"></div> <div class="normal-box"></div>

.float-box {
  float: left;
  width: 100px;
  height: 100px;
  background: #e74c3c;
}

.normal-box {
  /* 触发 BFC，避免被浮动元素覆盖 */
  overflow: hidden;
  height: 200px;
  background: #42b983;
}

效果：.normal-box 会自动避开浮动元素，不被覆盖，保持完整显示。

4. 实现自适应两栏/三栏布局

原理：利用“BFC 不与浮动元素重叠”的特性，可实现左侧固定宽度、右侧自适应的布局。
示例（两栏布局）：

1 2	<div class="left"></div> <div class="right"></div>

.left {
  float: left;
  width: 200px;
  height: 300px;
  background: #e74c3c;
}

.right {
  /* 触发 BFC，右侧自动填满剩余空间 */
  overflow: hidden;
  height: 300px;
  background: #42b983;
}

效果：左侧固定宽度，右侧自适应剩余空间，且不会被左侧浮动覆盖。

总结

BFC 的核心价值在于创建“布局隔离区”，主要应用场景可归纳为：

包含浮动元素（解决父元素高度塌陷）；
隔离 margin 重叠（阻止垂直边距合并）；
避免元素被浮动覆盖（保护自身布局空间）；
实现自适应布局（利用不重叠特性分配空间）。

实际开发中，overflow: hidden（简单但可能隐藏溢出内容）和 display: flow-root（CSS3 新增，无副作用，推荐）是触发 BFC 最常用的方式。

23、CSS 中的选择器 “+”“~”“>” 分别表示什么含义？举例说明

CSS 中的 +、~、> 都是组合选择器，用于选取与指定元素存在特定关系的其他元素，具体含义和用法如下：

1. `>`：子元素选择器

含义：选取直接子元素（仅匹配父元素的一级子元素，不包含嵌套更深的后代元素）。

示例：

<div class="parent">
  <p>直接子元素（会被选中）</p>
  <div>
    <p>嵌套的子元素（不会被选中）</p>
  </div>
</div>

/* 仅匹配 .parent 的直接子元素 p */
.parent > p {
  color: red;
}

效果：只有 .parent 下第一层的 <p> 会变红，嵌套在 <div> 里的 <p> 不受影响。

2. `+`：相邻相邻兄弟选择器

含义：选取紧邻在指定元素后面的第一个兄弟元素（两者必须有相同的父元素，且相邻）。

示例：

1
2
3

<div class="box">盒子1</div>
<p>紧邻的兄弟（会被选中）</p>
<p>非紧邻的兄弟（不会被选中）</p>

/* 匹配 .box 后面紧邻的第一个 p 元素 */
.box + p {
  background: yellow;
}

效果：只有 .box 后面第一个 <p> 会添加黄色背景，第二个 <p> 不生效。

3. `~`：通用兄弟选择器

含义：选取指定元素后面的所有兄弟元素（不需要紧邻，但必须有相同的父元素）。

示例：

<ul>
  <li class="active">列表项1</li>
  <li>列表项2（会被选中）</li>
  <li>列表项3（会被选中）</li>
  <div>其他元素（不会被选中，因不是 li 兄弟）</div>
  <li>列表项4（会被选中）</li>
</ul>

/* 匹配 .active 后面所有的 li 兄弟元素 */
.active ~ li {
  color: blue;
}

效果：.active 后面的所有 <li> 都会变蓝，非 <li> 元素（如 <div>）和前面的兄弟元素不受影响。

总结

选择器	名称	作用范围	关键点
`>`	子元素选择器	父元素的直接子元素	仅一级后代，不包含嵌套
`+`	相邻兄弟选择器	指定元素后紧邻的第一个兄弟	必须紧邻，同父元素
`~`	通用兄弟选择器	指定元素后所有的兄弟元素	无需紧邻，同父元素，同类型

这些选择器常用于精确控制元素间的关联样式，例如：用 > 限制样式仅作用于直接子元素，用 + 实现“点击一个元素后修改下一个元素样式”等交互效果。

24、简述 CSS 中的伪类（如:hover、:active）和伪元素（如::before、::after）的区别

CSS 中的伪类（Pseudo-class）和伪元素（Pseudo-element）都是用于选择文档中不存在的“虚拟”元素或状态，但它们的作用对象和使用场景有本质区别：

一、核心区别

特性	伪类（Pseudo-class）	伪元素（Pseudo-element）
作用对象	用于选择元素的特定状态或位置关系（元素本身存在）	用于创建不存在于 DOM 中的虚拟元素（元素本身不存在）
语法标识	单冒号 `:`（如 `:hover`、`:first-child`）	双冒号 `::`（如 `::before`、`::after`，CSS3 规范区分）
数量限制	一个选择器可同时使用多个伪类（如 `a:hover:active`）	一个选择器中只能使用一个伪元素（如不能同时用 `::before` 和 `::after` 组合）
核心功能	描述元素的动态状态或特殊位置	为元素添加额外内容或样式（如前后缀、装饰）

二、伪类（Pseudo-class）

伪类用于选择处于特定状态的元素，这些状态通常与用户行为或文档结构相关。

常见伪类及示例

动态状态伪类（与用户交互相关）：
- :hover：鼠标悬停在元素上时
- :active：元素被点击（激活）时
- :focus：元素获得焦点时（如输入框）
1
2
a:hover { color: red; } /* 鼠标悬停时链接变红 */
input:focus { border: 2px solid blue; } /* 输入框获焦时边框变蓝 */
结构伪类（与文档结构相关）：
- :first-child：父元素的第一个子元素
- :last-child：父元素的最后一个子元素
- :nth-child(n)：父元素的第 n 个子元素
1
2
ul li:first-child { margin-top: 0; } /* 列表第一个项去除上边距 */
table tr:nth-child(even) { background: #f5f5f5; } /* 表格偶数行灰色背景 */
其他伪类：
- :not(selector)：排除特定元素（否定伪类）
- :checked：选中的表单元素（如复选框）

三、伪元素（Pseudo-element）

伪元素用于创建并选择 DOM 中不存在的虚拟元素，通常用于为元素添加装饰性内容或样式。

常见伪元素及示例

::before 和 ::after（最常用）：
在元素内容的前面（::before）或后面（::after）插入虚拟内容，需配合 content 属性使用。

.quote::before {
  content: '"'; /* 插入引号 */
  color: #999;
  font-size: 20px;
}
.clearfix::after {
  content: ""; /* 空内容 */
  display: block;
  clear: both; /* 用于清除浮动 */
}

::first-letter 和 ::first-line：
选择文本的第一个字母或第一行。

p::first-letter {
  font-size: 2em; /* 首字母放大 */
  float: left;
}
p::first-line {
  color: #f00; /* 第一行文字变红 */
}

::selection：
选择用户选中的文本部分。

1
2
3

::selection {
  background: yellow; /* 选中文字的背景为黄色 */
}

四、总结

伪类：关注元素的状态或位置（如“悬停时”“第一个子元素”），不创建新元素，仅对已有元素进行条件筛选。
伪元素：关注元素的部分内容或额外装饰（如“首字母”“前后添加内容”），会创建虚拟元素，扩展元素的表现形式。

记忆要点：伪类是“选择特定状态的元素”，伪元素是“创建元素的特定部分”。CSS3 规范中用双冒号 :: 区分伪元素，以明确两者差异（但旧版本浏览器对单冒号 : 的伪元素也兼容，如 :before）。

25、CSS 中如何设置元素的背景（背景色、背景图、背景大小、背景位置）？

CSS 中通过一系列 background-* 属性控制元素的背景效果，包括背景色、背景图、背景大小、背景位置等，也可以通过简写属性 background 统一设置。以下是具体用法：

一、背景色（`background-color`）

设置元素的背景颜色，默认值为 transparent（透明）。
用法：

/* 关键字值 */
.element {
  background-color: red; /* 颜色名称 */
}

/* 十六进制6 进制值（推荐） */
.element {
  background-color: #ff0000; /* 红色 */
  background-color: #f00; /* 简写（三位，等价于 #ff0000） */
}

/* RGB/RGBA 值（支持透明度） */
.element {
  background-color: rgb(255, 0, 0); /* 红色 */
  background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

/* HSL/HSLA 值 */
.element {
  background-color: hsl(0, 100%, 50%); /* 红色 */
}

二、背景图（`background-image`）

设置元素的背景图片，默认值为 none（无背景图）。
用法：

/* 单个背景图 */
.element {
  background-image: url("bg.jpg"); /* 引入图片路径 */
}

/* 多个背景图（逗号分隔，前图覆盖后图） */
.element {
  background-image: url("icon.png"), url("bg-pattern.jpg");
}

注意：若同时设置 background-color 和 background-image，背景色会显示在图片下方（图片透明区域可见）。

三、背景位置（`background-position`）

设置背景图在元素中的位置，默认值为 0% 0%（左上角）。
用法：

/* 关键字（水平：left/center/right；垂直：top/center/bottom） */
.element {
  background-image: url("logo.png");
  background-position: center center; /* 水平居中 + 垂直居中 */
  background-position: right top; /* 右上角 */
}

/* 长度值（px、em 等，第一个值水平，第二个值垂直） */
.element {
  background-position: 20px 30px; /* 左偏移 20px，上偏移 30px */
}

/* 百分比（相对元素和图片的尺寸计算） */
.element {
  background-position: 50% 50%; /* 等价于 center center */
}

四、背景大小（`background-size`）

设置背景图的尺寸，默认值为 auto（保持图片原始尺寸）。
用法：

/* 关键字 */
.element {
  background-size: cover; /* 图片等比例缩放，完全覆盖元素（可能裁剪） */
  background-size: contain; /* 图片等比例缩放，完整显示在元素内（可能留空白） */
}

/* 长度值（固定宽高，可能变形） */
.element {
  background-size: 200px 100px; /* 宽 200px，高 100px */
}

/* 百分比（相对元素的宽高） */
.element {
  background-size: 50% 80%; /* 宽度为元素的 50%，高度为元素的 80% */
}

/* 单值（宽度固定，高度自动按比例计算） */
.element {
  background-size: 300px; /* 宽 300px，高自适应 */
}

五、其他常用背景属性

**background-repeat**：控制背景图是否重复，默认 repeat（水平和垂直重复）。

.element {
  background-repeat: no-repeat; /* 不重复 */
  background-repeat: repeat-x; /* 仅水平重复 */
  background-repeat: repeat-y; /* 仅垂直重复 */
}

**background-attachment**：控制背景图是否随页面滚动，默认 scroll（随元素滚动）。
1
2
3
.element {
background-attachment: fixed; /* 背景图固定在视口，不随滚动移动 */
}
**background-origin**：控制背景图的定位原点（默认以 padding 区域为原点）。
**background-clip**：控制背景的绘制区域（默认包含 padding 和 border）。

六、简写属性（`background`）

将所有背景属性整合为一个声明，顺序灵活，常用格式：
background: 颜色图片重复附着位置 / 大小;

示例：

1
2
3

.element {
  background: #f5f5f5 url("bg.jpg") no-repeat fixed center center / cover;
}

解析：

背景色 #f5f5f5
背景图 url("bg.jpg")
不重复 no-repeat
固定不动 fixed
位置居中 center center
大小覆盖 cover

总结

通过上述属性可全面控制元素背景，核心场景包括：

纯色背景：用 background-color。
图片背景：结合 background-image、background-position、background-size 调整显示效果。
复杂背景：用简写属性 background 简化代码，或叠加多个背景图实现层次效果。

26、简述 CSS 中的字体相关属性（font-family、font-size、font-weight）的使用

CSS 中的字体相关属性用于控制文本的显示样式，其中 font-family、font-size、font-weight 是最基础且常用的三个属性，分别用于设置字体类型、大小和粗细。

1. `font-family`：设置字体类型

作用：指定元素文本使用的字体，可指定多个备选字体（字体栈），浏览器会按顺序选择第一个可用的字体。
使用规则：

字体名称包含空格时，需用引号包裹（单引号或双引号）。
最后通常添加一个通用字体分类族的通用字体族（如 sans-serif、serif），作为 fallback（降级方案）。

示例：

/* 单个字体 */
body {
  font-family: "Microsoft YaHei"; /* 包含空格的字体名需加引号 */
}

/* 字体栈（推荐）：优先使用第一个，依次降级 */
.title {
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  /* 解释：优先苹方字体 → 其次 Neue → 再其次 Arial → 最后系统无衬线字体 */
}

常见通用字体族：

serif：衬线字体（如宋体、Times New Roman，笔画末端有装饰）。
sans-serif：无衬线字体（如黑体、Arial，笔画简洁，适合屏幕显示）。
monospace：等宽字体（如 Consolas，每个字符宽度相同，适合代码）。

2. `font-size`：设置字体大小

作用：定义文本的尺寸，是排版中控制层级的核心属性。
常用单位：

px：固定像素（绝对单位，不随父元素或屏幕变化）。
em：相对单位，相对于父元素的字体大小（1em = 父元素 font-size 值）。
rem：相对单位，相对于根元素（<html>）的字体大小（1rem = 根元素 font-size 值）。
%：相对于父元素字体大小的百分比。

示例：

html {
  font-size: 16px; /* 根元素基准值，1rem = 16px */
}

body {
  font-size: 1rem; /* 16px */
}

.title {
  font-size: 1.5rem; /* 24px（16×1.5） */
}

.small-text {
  font-size: 0.8em; /* 相对于父元素的 80%（若父元素是 16px，则为 12.8px） */
}

注意：浏览器默认字体大小通常为 16px，建议以 rem 为主要单位，便于响应式调整（通过媒体查询修改根元素 font-size）。

3. `font-weight`：设置字体粗细

作用：控制文本的粗细程度，可使用关键字或数值。
常用值：

关键字：normal（正常，默认值）、bold（粗体）。
数值：100（最细）~ 900（最粗），间隔 100，其中 400 等价于 normal，700 等价于 bold。

示例：

.normal-text {
  font-weight: normal; /* 等价于 400 */
}

.bold-text {
  font-weight: bold; /* 等价于 700 */
}

.light-text {
  font-weight: 300; /* 轻量 */
}

.extra-bold {
  font-weight: 800; /* 极粗 */
}

注意：并非所有字体都支持全部数值粗细，若字体文件中没有对应粗细的样式，浏览器会自动降级显示最接近的可用粗细。

补充：字体简写属性 `font`

可将字体相关属性（包括 font-style、font-variant、font-weight、font-size、line-height、font-family）合并为一个声明，简化代码。
语法：font: [style] [variant] [weight] size/line-height family;
示例：

/* 完整简写：斜体 + 正常变体 + 粗体 + 16px大小/1.5行高 + 无衬线字体 */
p {
  font: italic normal bold 16px/1.5 sans-serif;
}

/* 最简化写法（至少包含 size 和 family） */
h1 {
  font: 24px "Microsoft YaHei", sans-serif;
}

总结

font-family：通过字体栈设置字体类型，确保兼容性。
font-size：用 rem 或 px 控制大小，影响文本可读性和层级。
font-weight：用关键字或数值调整粗细，突出重要内容。

这三个属性是文本样式的基础，合理搭配可构建清晰、易读的页面排版。

27、CSS 中的 line-height 属性有什么作用？如何设置行高使其垂直居中？

一、`line-height` 的作用

line-height（行高）用于定义文本行之间的垂直距离，即一行文本基线到下一行文本基线的距离。它的核心作用包括：

控制文本行间距：影响多行文本的可读性（行高过小会导致文字重叠，过大则显得松散）。
间接控制单行文本的垂直位置：通过与容器高度配合，实现单行文本的垂直居中。
决定文本所在“行框”的高度：即使是单行文本，也会形成一个“行框”，其高度由 line-height 决定（默认情况下，文本在该行框中垂直居中）。

二、`line-height` 的取值方式

/* 1. 数值（无单位，相对于当前字体大小的倍数） */
p { line-height: 1.5; } /* 行高 = font-size × 1.5（推荐，自适应字体大小） */

/* 2. 长度值（如 px、em、rem） */
h1 { line-height: 30px; } /* 固定行高 30px */
h2 { line-height: 2em; }  /* 行高 = 当前元素 font-size × 2 */

/* 3. 百分比（相对于当前元素的 font-size） */
div { line-height: 120%; } /* 行高 = font-size × 120% */

/* 4. 关键字 */
body { line-height: normal; } /* 默认值，由浏览器计算（通常 1.2 左右） */

推荐用法：使用无单位数值（如 1.5），因为它会根据子元素的字体大小自动计算行高，更灵活。

三、如何用 `line-height` 实现垂直居中

line-height 实现垂直居中的核心原理是：当元素的 line-height 等于其 height 时，单行文本会在元素内垂直居中。

适用场景：单行文本（如按钮文字、标题）

1
2
3

<div class="container">
  这段单行文本会垂直居中
</div>

.container {
  width: 200px;
  height: 60px; /* 容器固定高度 */
  line-height: 60px; /* 行高 = 容器高度 */
  background: #f5f5f5;
  text-align: center; /* 可选：同时实现水平居中 */
}

原理：

文本所在的“行框高度”等于 line-height（60px），与容器高度（60px）一致。
文本在“行框”中默认垂直居中，因此整体看起来就在容器中垂直居中了。

四、注意事项

仅适用于单行文本：多行文本使用 line-height 居中会导致行间距过大，需改用 Flex 布局（align-items: center）等方案。

子元素继承问题：若父元素用 em 或百分比设置 line-height，子元素会继承计算后的具体值（而非比例）；而无单位数值会让子元素继承比例，更适合嵌套结构。

.parent {
  font-size: 16px;
  line-height: 1.5; /* 子元素继承 1.5 这个比例 */
  /* line-height: 150%; 子元素会继承 24px（16×150%），不灵活 */
}
.child {
  font-size: 20px; /* 行高会自动计算为 20×1.5=30px，更合理 */
}

总结

line-height 主要控制文本行间距和行框高度，是排版可读性的核心属性。
实现单行文本垂直居中：将元素的 line-height 设置为与 height 相等。
多行文本或复杂内容的垂直居中，建议使用 Flex 布局（display: flex; align-items: center），更通用且无局限。

28、什么是 CSS 的重置（Reset）和 - normalize.css？它们的区别是什么？

CSS 重置（Reset）和 normalize.css 都是用于解决不同浏览器默认样式不一致问题的方案，但它们的实现思路和效果有显著区别：

一、CSS 重置（Reset）

核心思想：通过强制清除所有浏览器的默认样式，让元素在所有浏览器中保持“零样式”状态，再由开发者重新定义统一的基础样式。

典型实现：早期的 reset.css 会将大部分元素的默认边距、内边距、边框等清零，例如：

/* 简化版 Reset 示例 */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

ul, ol {
  list-style: none; /* 移除列表默认圆点/数字 */
}

a {
  text-decoration: none; /* 移除链接下划线 */
  color: inherit; /* 继承父元素颜色 */
}

/* 清除表单元素默认样式 */
input, button {
  font-family: inherit;
  background: none;
}

特点：

彻底清除默认样式，避免浏览器差异，但过于“激进”。
可能需要重新定义大量基础样式（如 h1-h6 字体大小、p 标签的行高）。
适合需要完全控制样式、不依赖浏览器默认表现的场景。

二、normalize.css

核心思想：保留浏览器合理的默认样式，仅修复不一致的地方，使元素在不同浏览器中的表现统一且符合现代标准。

主要功能：

修复浏览器bug（如 IE 下的 box-sizing 异常、表单元素样式不一致）。
统一元素的默认样式（如 h1-h6 在不同浏览器中的字体大小差异）。
保留有用的默认样式（如链接的下划线、列表的项目符号），而非完全清除。
增强可用性（如确保 input 在获得焦点时有明显的焦点样式）。

特点：

更温和的方案，尊重浏览器的合理默认行为。
代码更简洁，无需重新定义大量基础样式。
支持响应式图片、HTML5 新元素（如 section、article）的默认样式。

三、核心区别

维度	CSS 重置（Reset）	normalize.css
对默认样式	完全清除，让元素回归“零样式”	保留合理默认样式，仅修复不一致性
开发成本	需手动重新定义大量基础样式	无需额外工作，可直接在此基础上开发
浏览器兼容性	解决差异，但可能引入新的兼容性问题	针对性修复浏览器bug，兼容性更好
适用场景	需要完全自定义样式的项目	大多数常规项目，追求开发效率

总结

CSS 重置：“从零开始”，适合需要彻底控制样式、不依赖任何默认表现的场景，但开发成本较高。
normalize.css：“统一基础”，保留有用的默认样式，修复差异，适合大多数项目，能减少重复工作。

目前，normalize.css 因更符合现代开发需求而被广泛使用（许多前端框架如 Bootstrap 也内置了类似的 normalize 逻辑）。实际开发中，可根据项目对样式控制的精细程度选择，也可在 normalize.css 基础上添加自定义重置规则。

29、CSS 中如何实现文字溢出显示省略号（单行和多行）？

在 CSS 中，实现文字溢出显示省略号的效果需结合多个属性，单行和多行的实现方式略有不同：

一、单行文字溢出显示省略号

适用于标题、导航等只有一行文本的场景，核心是通过 white-space 限制文本不换行，再用 text-overflow 显示省略号。

实现代码：

.single-line {
  width: 200px; /* 必须设置固定宽度 */
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出部分显示省略号 */
}

关键属性解析：

white-space: nowrap：强制文本在一行显示，不自动换行。
overflow: hidden：隐藏超出容器宽度的文本部分。
text-overflow: ellipsis：指定溢出文本以省略号（...）显示。
必须设置固定宽度（如 width 或 max-width），否则容器会随文本自动扩展，无法触发溢出效果。

二、多行文字溢出显示省略号

适用于段落、描述等可能有多行文本的场景，需要使用 line-clamp 属性（CSS 规范中较新的属性，兼容性较好）。

实现代码：

.multi-line {
  width: 300px; /* 固定宽度 */
  display: -webkit-box; /* 旧版 WebKit 内核浏览器需要的属性 */
  -webkit-box-orient: vertical; /* 设置盒子内子元素的排列方向为垂直 */
  -webkit-line-clamp: 3; /* 限制显示的最大行数（这里为 3 行） */
  overflow: hidden; /* 隐藏溢出内容 */
  /* 可选：设置行高，控制多行文本的整体高度 */
  line-height: 1.5;
}

关键属性解析：

-webkit-line-clamp: n：核心属性，指定最多显示 n 行，超出部分用省略号代替（n 为正整数）。
display: -webkit-box 和 -webkit-box-orient: vertical：配合 line-clamp 使用，用于旧版 WebKit 内核浏览器（如 Chrome、Safari）的兼容。
overflow: hidden：确保超出指定行数的文本被隐藏。
同样需要设置固定宽度，否则容器会自适应文本宽度，无法触发溢出。

三、兼容性说明

单行省略号：所有现代浏览器均支持，兼容性良好。
多行省略号：-webkit-line-clamp 兼容 Chrome、Firefox、Safari 等现代浏览器，但 IE 不支持（如需兼容 IE，需通过 JavaScript 实现）。

示例效果

<!-- 单行省略 -->
<div class="single-line">
  这是一段单行文本，当内容超出容器宽度时会显示省略号...
</div>

<!-- 多行省略 -->
<div class="multi-line">
  这是一段多行文本，当内容超过3行时，超出的部分会被省略号代替。这种方式常用于文章摘要、产品描述等需要展示部分内容的场景。
</div>

总结

单行文本：通过 white-space: nowrap + overflow: hidden + text-overflow: ellipsis 实现。
多行文本：通过 display: -webkit-box + -webkit-line-clamp: n + overflow: hidden 实现（n 为最大行数）。

两种方式都需要为元素设置固定宽度，确保文本能触发“溢出”条件。

30、简述 CSS 中的 transform 属性的常见取值（如 translate、scale、rotate）及作用

CSS 中的 transform 属性用于对元素进行几何变换（如平移、缩放、旋转等），不会影响页面布局（不会改变其他元素的位置和大小），常见取值取值及作用如下：

1. `translate()`：平移

作用：沿 X 轴、Y 轴或 Z 轴移动元素，单位通常为 px 或百分比（相对元素自身尺寸）。
常见取值：
- translateX(x)：仅沿 X 轴（水平方向）平移。
- translateY(y)：仅沿 Y 轴（垂直方向）平移。
- translate(x, y)：同时沿 X 轴和 Y 轴平移。
- translateZ(z)/translate3d(x, y, z)：3D 平移（需配合 perspective 属性实现 3D 效果）。

示例：

.box {
  /* 向右平移 50px，向下平移 20px */
  transform: translate(50px, 20px);
  /* 等价于 translateX(50px) translateY(20px) */
}

.center {
  /* 相对自身宽高的 50% 平移，实现元素自身居中（配合定位使用） */
  transform: translate(-50%, -50%);
}

2. `scale()`：缩放

作用：按比例放大或缩小元素，默认以元素中心点为缩放原点。
常见取值：
- scaleX(x)：仅沿 X 轴（水平方向）缩放（x > 1 放大，0 < x < 1 缩小）。
- scaleY(y)：仅沿 Y 轴（垂直方向）缩放。
- scale(x, y)：同时沿 X 轴和 Y 轴缩放（单值时 x = y，等比例缩放）。
- scale3d(x, y, z)：3D 缩放。

示例：

.box:hover {
  /* 悬停时等比例放大到 1.2 倍 */
  transform: scale(1.2);
}

.stretch {
  /* 水平方向放大到 1.5 倍，垂直方向不变 */
  transform: scaleX(1.5);
}

3. `rotate()`：旋转

作用：绕原点旋转元素，单位为 deg（角度）或 rad（弧度），正值顺时针旋转，负值逆时针旋转。
常见取值：
- rotate(angle)：2D 旋转（绕 Z 轴）。
- rotateX(angle)：绕 X 轴旋转（3D 效果，如“翻转”）。
- rotateY(angle)：绕 Y 轴旋转（3D 效果，如“侧身”）。
- rotateZ(angle)/rotate3d(x, y, z, angle)：3D 旋转。

示例：

.box {
  /* 顺时针旋转 45 度 */
  transform: rotate(45deg);
}

.card:hover {
  /* 绕 X 轴旋转 180 度（翻转效果） */
  transform: rotateX(180deg);
  transition: transform 0.5s; /* 配合过渡实现动画 */
}

4. `skew()`：倾斜

作用：使元素沿 X 轴或 Y 轴倾斜（扭曲），单位为 deg。
常见取值：
- skewX(angle)：仅沿 X 轴倾斜（水平方向扭曲）。
- skewY(angle)：仅沿 Y 轴倾斜（垂直方向扭曲）。
- skew(x-angle, y-angle)：同时沿 X 轴和 Y 轴倾斜。

示例：

.shape {
  /* 水平方向倾斜 20 度，垂直方向倾斜 10 度 */
  transform: skew(20deg, 10deg);
}

5. 组合变换

transform 支持多个变换函数组合，用空格分隔，按顺序执行。
示例：

.box {
  /* 先平移，再旋转，最后缩放（顺序影响结果） */
  transform: translate(50px, 50px) rotate(30deg) scale(1.1);
}

6. 辅助属性 `transform-origin`

作用：修改变换的原点（默认是元素中心点 center center）。

示例：

.box {
  transform-origin: top left; /* 以左上角为原点旋转/缩放 */
  transform: rotate(30deg);
}

总结

变换函数	核心作用	典型场景
`translate`	平移元素	居中定位、滑动动画
`scale`	缩放元素	悬停放大效果、缩略图预览
`rotate`	旋转元素	旋转图标、3D 翻转卡片
`skew`	倾斜元素	创建特殊几何形状（如平行四边形）

transform 变换不会触发页面重排（reflow），性能优于通过 margin 或 top 等属性修改位置，常与 transition 或 animation 配合实现流畅的动画效果。

文章作者: 烟雨数流年

文章链接: https://yanyusln.github.io/2025/11/18/二-CSS-基础/

属性定义 CSS基础选择器值

1、简述 CSS 的盒模型（标准盒模型和 IE 盒模型）的区别

一、标准盒模型（W3C 盒模型）

二、IE 盒模型（怪异盒模型）

三、如何切换盒模型

四、总结

2、CSS 中如何设置元素的盒模型为标准盒模型或 IE 盒模型？

3、CSS 选择器有哪些类型？优先级如何计算？

一、CSS 选择器的主要类型

1. 基础选择器（最常用）

2. 复合选择器（组合使用基础选择器）

3. 伪类选择器（用于元素的特定状态或位置）

4. 伪元素选择器（用于元素的特定部分）

二、选择器优先级计算规则

三、优先级示例

总结

4、简述 CSS 中的层叠（Cascade）、继承（Inheritance）和特异性（Specificity）的含义

1. 层叠（Cascade）

2. 继承（Inheritance）

3. 特异性（Specificity）

总结

5、CSS 中的 display 属性有哪些常见取值？分别表示什么布局行为？

一、基础布局类型

1. display: block（块级元素）

2. display: inline（行内元素）

3. display: inline-block（行内块元素）

二、隐藏元素

4. display: none

三、表格布局

5. display: table 及相关值

四、弹性布局

6. display: flex（弹性盒布局）

五、网格布局

7. display: grid（网格布局）

六、其他常见取值

总结

6、如何实现元素的水平居中？请列举至少 3 种方法

1. 块级元素定宽：margin: 0 auto

2. Flex 布局（推荐）

3. 行内/行内块元素：text-align: center

4. 绝对定位 + 位移（不定宽适用）

5. Grid 网格布局

总结

7、如何实现元素的垂直居中？请列举至少 3 种方法

1. Flex 弹性布局（推荐）

2. 绝对定位 + 变换（transform）

3. 表格布局（table-cell）

4. Grid 网格布局

5. 已知父元素高度 + 子元素定高（margin-top 计算）

总结

8、CSS 中的 position 属性有哪些取值？分别有什么特点？

1. static（默认值）

2. relative（相对定位）

3. absolute（绝对定位）

4. fixed（固定定位）

5. sticky（粘性定位）

总结

9、简述 CSS 中的 float 属性的作用及清除浮动的方法

一、float 属性的作用

二、浮动带来的问题

三、清除浮动的常用方法

1. 额外标签法（空标签清除）

2. 父元素添加 overflow: hidden 或 auto

3. 伪元素清除法（推荐）

4. 父元素也设置浮动

总结

10、CSS 中的 z-index 属性的作用是什么？它的生效条件是什么？

一、z-index 的核心作用

二、z-index 的生效条件

三、示例说明

总结

11、简述 CSS 中的 Flex 布局的基本概念（容器和项目的属性）

一、基本概念

二、Flex 容器的核心属性（控制整体布局）

三、Flex 项目的核心属性（控制单个项目）

四、总结

12、Flex 布局中如何实现项目的水平均匀分布？如何实现项目的垂直对齐？

一、实现项目的水平均匀分布

1. 两端对齐，中间间隔相等（最常用）

2. 项目两侧间隔相等（环绕分布）

3. 所有间隔完全相等（包括边缘）

1. `display: block`（块级元素）

2. `display: inline`（行内元素）

3. `display: inline-block`（行内块元素）

4. `display: none`

5. `display: table` 及相关值

6. `display: flex`（弹性盒布局）

7. `display: grid`（网格布局）

1. 块级元素定宽：`margin: 0 auto`

3. 行内/行内块元素：`text-align: center`

2. 绝对定位 + 变换（`transform`）

3. 表格布局（`table-cell`）

5. 已知父元素高度 + 子元素定高（`margin-top` 计算）

1. `static`（默认值）

2. `relative`（相对定位）

3. `absolute`（绝对定位）

4. `fixed`（固定定位）

5. `sticky`（粘性定位）

一、`float` 属性的作用

2. 父元素添加 `overflow: hidden` 或 `auto`

一、`z-index` 的核心作用

二、`z-index` 的生效条件

1. 控制所有项目的垂直对齐（容器属性 `align-items`）

2. 控制单个项目的垂直对齐（项目属性 `align-self`）

二、`display: none` 与 `visibility: hidden` 的核心区别

1. `>`：子元素选择器

2. `+`：相邻相邻兄弟选择器

3. `~`：通用兄弟选择器