HTML + CSS

适用：HTML / CSS 概念查阅；居中、多栏、小三角等实操见手写与布局。

边界：预处理器（Less / SCSS）在本章末节。重排重绘见浏览器；Vue scoped / :deep 在下面 CSS 段，和预处理器不是一回事。

1. HTML 核心

什么是 HTML 语义化标签？常用语义化标签有哪些？好处是什么？

1. 什么是语义化标签

简单说：标签本身就表达标签内容的含义，而不是只看样式。

过去大量使用 <div>、<span>，它们是无语义的通用容器，只用来做布局，浏览器、机器不知道这块内容是标题、导航、还是页脚。

语义化标签 = 让标签告诉浏览器 / 搜索引擎：这块是什么类型的内容，不改变默认样式，改变的是含义。

2. 常用语义化标签

html

<!-- 页面头部 -->
<header></header>
<!-- 导航区域 -->
<nav></nav>
<!-- 独立完整的内容块，比如一篇文章、一条帖子 -->
<article></article>
<!-- 内容区块，主题相关的一组内容 -->
<section></section>
<!-- 侧边栏、附属补充内容 -->
<aside></aside>
<!-- 页面底部 -->
<footer></footer>
<!-- 主内容，一个页面最好只出现一次 -->
<main></main>
<!-- 标题 h1~h6 本身就是语义标签 -->
<h1></h1>
<!-- ~ -->
<h6></h6>
<!-- 段落 -->
<p></p>
<!-- 列表 -->
<ul></ul>
<ol></ol>
<li></li>
<!-- 引用 -->
<blockquote></blockquote>
<!-- 强调文本 -->
<em></em> <strong></strong>
<!-- 时间日期 -->
<time></time>
<!-- 媒体 -->
<video></video>
<audio></audio>
<!-- 图 + 图说明 -->
<figure>
  <img />
  <figcaption>图片描述</figcaption>
</figure>

对比：

❌ <div class="header"> 只有 class，标签本身没有含义
✅ <header> 标签本身就代表页面头部

3. 使用语义化的好处

对搜索引擎 SEO（搜索引擎优化）友好

搜索引擎爬虫可以识别页面结构，分清哪里是导航、正文、页脚，利于爬虫抓取分析页面。抓取、索引、排名以及 SPA（单页应用）空壳问题，见浏览器 · 搜索引擎与 SEO。

无障碍阅读（屏幕阅读器）

给视障用户使用的读屏软件可以识别语义标签，快速导航到导航、主内容、页脚，提升残障用户体验。如果全是 div，读屏软件无法区分内容区域。

代码可读性、可维护性提升

看标签就能看懂页面结构，不用看 class 类名就能知道这块是导航、侧边栏，多人协作更友好。

利于浏览器解析

浏览器更好理解文档结构，有利于浏览器的解析渲染。

注意

语义化不等于不用 div。布局嵌套依旧大量使用 div，只是有明确业务含义的区域优先使用对应语义标签。

4. 口头描述

是什么

语义化标签就是让标签本身带上内容含义，而不是只靠样式或 class 来表达这块是什么。

常用有哪些

常见如：header、footer、main、nav、section、article、aside、h1~h6、p，以及 video、audio 等。

有什么好处

SEO（搜索引擎优化）：爬虫更容易识别导航、正文、页脚等结构，利于抓取和分析；整条线见浏览器 · SEO
可维护性：开发看标签就能懂页面结构，不必依赖 class 命名
浏览器解析：语义结构更清晰，有利于浏览器理解并渲染文档
业务方面：业务如果有朗读、读屏、文本提取、辅助阅读类需求，语义化标签可以辅助设备识别内容层级。也更方便程序识别有效内容，过滤掉导航、页脚等无关模块。如果全部使用 div 的页面，机器只能读取全部 DOM，无法区分哪些是真正的主体内容。

H5 新增特性有哪些？

H5新增了有语义标签、表单增强、多媒体、画布图形、存储、API、拖拽等。

1. 语义化标签

header、nav、main、article、section、aside、footer、time、figure 等，提升页面结构可读性与无障碍体验。

2. 表单增强

新类型：email、tel、url、number、range、date、time、color
新属性：placeholder、required、autofocus、pattern（正则校验）、multiple

3. 多媒体标签

<video> 视频、<audio> 音频，不再依赖 Flash 播放音视频。

4. 图形绘制

<canvas>：用 JS 绘制，做图表、游戏、动画
<svg>：矢量图形

5. 本地存储

localStorage：持久化本地存储
sessionStorage：会话级存储

注意

cookie 不属于 H5 新增，更早就有。

6. 新 Web API（高频）

File API：文件读取、上传预览（FileReader）
拖拽 API（Drag & Drop）：拖拽相关事件
Geolocation API：获取设备地理位置
WebWorker：后台子线程，缓解 JS 单线程阻塞
WebSocket：长连接，双向实时通信

7. 其他新增

data-* 自定义属性，存业务自定义数据
<details>、<summary>：折叠展开

8. 口头描述

H5新增了很多东西像语义化标签(header、footer)、多媒体标签(video、audio)、图形绘制(canvas、svg)、表单增强、浏览器存储、API(拖拽/上传)、还有data-*这种自定义属性。

CSS3 新增特性有哪些？

和 H5 一样，按块说，不要从某一个属性开始背。CSS3 常见就这几类：圆角阴影、渐变、变换、过渡动画、弹性/网格布局、媒体查询，再加上 rgba、calc、CSS 变量等。

1. 视觉增强

border-radius 圆角、box-shadow 盒阴影、text-shadow 文字阴影
opacity、rgba() / hsla() 透明色

2. 背景与渐变

background-size、background-clip，多层背景
linear-gradient / radial-gradient 渐变

3. 变换 transform（2D / 3D）

translate、rotate、scale、skew；3D 再加 perspective。动画优先用 transform / opacity，少改宽高和 top / left（和重排有关，见重排重绘）。

4. 过渡与动画

transition：有状态变化才播（hover、开关）
animation + @keyframes：可循环、多关键帧（loading、进场）

细节见动画和过渡。

5. 布局与适配

flex（弹性布局）：一维排布，见 flex 常用属性
grid（网格布局）：二维格子，见 grid
@media（媒体查询）：按屏宽切样式，响应式基础
rem / vw / vh 等适配单位，见移动端适配

6. 其他常用

box-sizing: border-box（开发里几乎全局开）
calc() 算宽高
@font-face 自定义字体
CSS 变量：--主色: #333;，var(--主色)
filter 滤镜（模糊、亮度）

🎤 口述精简版

CSS3 按块说：圆角阴影透明、渐变、transform 变换、transition / animation、flex 和 grid、媒体查询。再补 box-sizing、calc、CSS 变量。动画优先走 transform 和 opacity。flex、动画细节可以再往下展开。

2. CSS 原理与布局概念

标准盒模型和 IE 怪异盒模型的区别？如何切换？

核心区别

标准盒模型（content-box）：width / height 只代表内容区域。

总宽度 = width + padding + border + margin

怪异盒模型（border-box）：width / height 包含内容 + padding + border。

总宽度 = width + margin

一句话：content-box 加 padding/border 会把盒子撑大；border-box 是在设定的 width 里往里扣，盒子外轮廓更可控。

如何切换

用 box-sizing：

css

box-sizing: content-box; /* 标准盒模型，浏览器默认 */
box-sizing: border-box;  /* 怪异盒模型（ 常说的 IE 盒模型） */

开发里常见全局写法：

css

*,
*::before,
*::after {
  box-sizing: border-box;
}

在线 Demo

对比标准盒模型与怪异盒模型 → 打开盒模型案例

🎤 口述精简版

标准盒模型是 content-box，width 只算内容，padding、border 会额外把盒子撑大。怪异盒模型是 border-box，width 把 padding 和 border 算进去，盒子不会被撑开，做布局更省心，项目里也更常用。两者用 box-sizing 切换。

CSS 选择器优先级规则、权重计算方式？

常见样式怎么写

类型	怎么设置	写法示例
行内样式	写在标签的 `style` 属性里	`<div style="color: red;">`
id 选择器	HTML 用 `id`，CSS 用 `#`	HTML：`id="app"` → CSS：`#app { }`
类选择器	HTML 用 `class`，CSS 用 `.`	HTML：`class="box"` → CSS：`.box { }`
属性选择器	按标签属性匹配，用 `[]`	`input[type="text"] { }`
伪类	表示状态/结构，用单冒号 `:`	`a:hover { }`、`li:first-child { }`
标签选择器	直接写标签名	`div { }`、`p { }`
伪元素	选中元素的某一部分，用双冒号 `::`	`p::before { }`、`p::after { }`

补充：伪类是选「某个状态下的元素」；伪元素是造/选「元素里的一块内容」（如 before/after）。

权重怎么算（记四级）

多个规则同时命中时，按特异性比大小。可记成四位数 (a, b, c, d)，从左往右比，左边大的直接赢：

位	代表什么	例子	权重
a	行内样式	`style=""`	`(1,0,0,0)`
b	id	`#app`	`(0,1,0,0)`
c	类 / 属性 / 伪类	`.box`、`[type]`、`:hover`	`(0,0,1,0)`
d	标签 / 伪元素	`div`、`::before`	`(0,0,0,1)`

组合就累加：#app .item div = 1 个 id + 1 个 class + 1 个标签 → (0,1,1,1)。

还要记住的几条

权重相同：谁写在后面谁生效
!important：强行抬到最高档；两边都加时，再比选择器权重
通配符 *、继承样式：权重最低，很容易被盖掉
不要堆权重：能用 class 就别上 id；少用 !important，后面才好改

🎤 口述精简版

多个 CSS 打到同一个元素时，浏览器比谁更具体：行内样式最狠，其次 id，再是 class / 属性选择器 / 伪类，最后是标签和伪元素。可以记成 (行内, id, class, 标签)，从左往右比。

权重一样看谁后写；!important 会直接拔高，两边都加还是要比选择器。平时尽量用 class，别动不动 id 和 !important。

什么是 BFC？触发条件、作用和使用场景？

白话理解

BFC（块级格式化上下文）可以想成：一块独立的小房间。房间里面怎么排布局，不会影响到外面；外面的浮动、margin 也进不来捣乱。

为什么会有那些问题

默认情况下，普通块级盒子待在同一个 BFC 里，布局会「串门」，于是出现两个常考的坑：

垂直 margin 合并：同一 BFC 里，相邻块的上下外边距会叠成一个（通常取较大值）。规范故意这么做：两个 <p> 不要变成「上一段的 margin-bottom + 下一段的 margin-top」空隙翻倍。副作用是：父盒子没有 padding / border / overflow 拦住时，子元素的 margin 会「漏」到父外面，父子间距看起来没了。
float 脱离普通流：浮动元素不占普通流里的位置。父盒子算高度时只看还在流里的孩子，浮动子不算，父高度可能变成 0（高度塌陷）。后面的块级盒子仍按满宽排，背景会钻到浮动元素底下，只有文字会绕开。

新开一个 BFC，就是把里面的布局关进独立房间：里面的 margin 不再和外面合并；这个房间算高度会把浮动子孙包进来；这个房间自己也不会和旁边的 float 重叠。

怎么触发（记 4 类就够）

怎么开	常见写法	怎么记
溢出裁剪/滚动	`overflow: hidden / auto / scroll`	最常用，一句话就能开 BFC
浮动	`float: left / right`	浮动元素自己就是一个 BFC
脱离文档流定位	`position: absolute / fixed`	绝对/固定定位也会开
特殊 display	`inline-block`、`flow-root`、`flex`、`grid`	`flow-root` 是专门开 BFC 的，副作用少

注意：overflow: visible（默认）不会开 BFC；要改成 hidden/auto/scroll 才行。

作用 & 场景

1. 父子 margin 合并

父子都写了上下 margin，本来想各留一点，结果叠成一块，间距不对。给父元素开 BFC，里面的 margin 就关在「小房间」里，不再跟外面合并。

2. 浮动导致父高度塌陷

子元素一 float，就脱离普通流，父盒子高度可能变成 0。给父盒子开 BFC，它会把浮动子元素也算进高度，相当于清浮动。

3. 被浮动元素盖住 / 两栏并排

左边 float，右边普通块会钻到底下，还可能被左边盖住。给右边开 BFC，它会躲开浮动区域，乖乖在旁边排成两栏。

在线 Demo

三组左右对比：浮动高度塌陷、垂直 margin 重叠、挡住浮动做两栏 → 打开 BFC 案例

🎤 口述精简版

BFC 就是一块隔离的独立布局区域，里面外面互不影响。

怎么开：overflow 别用默认的 visible，改成 hidden/auto；或者 float、absolute/fixed；再或者 inline-block、flow-root。现在想干净一点，直接 display: flow-root 就行。

用来干嘛：防父子 margin 合并、清浮动把父高度撑起来、让旁边的盒子不被浮动挡住。

position 五个属性的区别和使用场景？

五个值对比

值	是否脱离文档流	定位参照	常见场景
`static`	否（默认）	无，`top/left` 等无效	正常排版，一般不用特意写
`relative`	否，原位置还占着	相对自己原来的位置偏移	微调位置；给绝对定位当「爸爸」参照
`absolute`	是	相对最近的非 `static` 祖先；没有就相对整个页面	弹层、角标、相对某个盒子精确定位
`fixed`	是	相对浏览器视口	吸顶导航、回到顶部、固定侧栏
`sticky`	滚动前像 relative，吸住后像 fixed	相对最近的滚动容器	表头吸顶、侧栏滚动到一定位置钉住

关键点记清

relative 不脱流：挪走了，原来那块空还在，后面元素不会顶上来
absolute / fixed 脱流：原来位置不占了，后面元素会补上来
absolute 找祖先：一路往上找带 relative / absolute / fixed / sticky 的父级；找不到就相对初始包含块（整页）
fixed 看视口：滚动页面它还钉在屏幕上（祖先有 transform 等时例外，可能变成相对那个祖先）
sticky 要设阈值：必须写 top / left 等，否则看不出吸顶效果

在线 Demo

对比五个定位值：是否脱流、参照谁、吸顶效果 → 打开 position 案例

🎤 口述精简版

position 五个值：static 是默认，正常文档流；relative 相对自己原来位置挪，但坑还占着，常用来给绝对定位当参照；absolute 脱流，相对最近的定位祖先摆；fixed 脱流，相对视口钉死，做吸顶导航；sticky 介于相对和固定之间，滚到阈值就吸住，适合表头吸顶。

flex 布局常用属性？

容器属性（写在父元素上）

属性	作用	常用值
`display: flex`	开启 flex 布局	—
`flex-direction`	主轴方向	`row`（默认横排）/ `column`（竖排）
`justify-content`	主轴对齐	`flex-start` / `center` / `flex-end` / `space-between` / `space-around`
`align-items`	交叉轴对齐	`stretch`（默认）/ `flex-start` / `center` / `flex-end`
`flex-wrap`	是否换行	`nowrap`（默认）/ `wrap`
`gap`	子项间距	如 `gap: 12px`

子项属性（写在子元素上）

属性	作用
`flex-grow`	有剩余空间时，按比例放大
`flex-shrink`	空间不够时，按比例缩小
`flex-basis`	分配前的基础尺寸
`flex`	上面三个的简写
`align-self`	单独覆盖某一个子项的交叉轴对齐

水平、垂直居中（最常用写法）

css

.box {
  display: flex;
  justify-content: center; /* 主轴居中：默认横向时就是水平居中 */
  align-items: center;     /* 交叉轴居中：默认横向时就是垂直居中 */
}

主轴是竖向时（flex-direction: column）：justify-content 管垂直，align-items 管水平，别记反。

🎤 口述精简版

flex 分容器和子项。容器常用：flex-direction 定主轴，justify-content 管主轴对齐，align-items 管交叉轴对齐。居中就两行：justify-content: center + align-items: center。子项常用 flex 简写控制占多大。

布局实操

更多居中写法、两栏三栏、小三角见手写与布局。

`flex: 1` 是什么意思？

flex 是简写，完整是：flex-grow | flex-shrink | flex-basis。

flex: 1 一般等价于：

css

flex-grow: 1;    /* 有剩空间就跟着涨 */
flex-shrink: 1;  /* 不够就跟着缩 */
flex-basis: 0%;  /* 分配前基础宽度先按 0 算，再平分剩余空间 */

白话：这个子项愿意吃掉剩余空间；多个兄弟都写 flex: 1，就大致均分父容器。

常见场景：左右固定、中间自适应；几个卡片等分一行。

注意：flex: 1 和 flex: auto（1 1 auto）不一样——auto 会先按内容/自身宽度算基础尺寸，再分配剩余；1 更偏向「忽略内容宽度、直接平分」。

在线 Demo

对比 flex: 1 均分剩余空间、与 flex: auto 的差异 → 打开 flex: 1 案例

🎤 口述精简版

flex: 1 是 grow、shrink、basis 的简写，常见理解成 1 1 0%：能放大能缩小，基础尺寸按 0 起算，主要用来均分或吃掉剩余空间。多个子项都写 flex: 1，就是平分父容器。

grid 布局的使用场景和常用属性？

什么时候用 grid

二维布局：既要管行、又要管列（仪表盘、卡片墙、杂志式排版）
一维排布（一行或一列）优先用 flex；格子感强、对齐要求高用 grid

常用属性

属性	写在哪	作用
`display: grid`	容器	开启网格
`grid-template-columns`	容器	定义列，如 `1fr 1fr 1fr`、`repeat(3, 1fr)`
`grid-template-rows`	容器	定义行
`gap` / `row-gap` / `column-gap`	容器	格子间距
`grid-column` / `grid-row`	子项	跨几列 / 几行，如 `span 2`
`justify-items` / `align-items`	容器	格子里内容的对齐
`place-items: center`	容器	水平垂直一起居中的简写

css

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

🎤 口述精简版

grid 适合二维布局，行和列一起管。常用就记：grid-template-columns 分列、gap 间距、子项用 grid-column 跨格。一维用 flex，二维格子用 grid。

水平 / 垂直居中、两栏三栏（实操入口）

居中多种实现、两栏 / 三栏自适应、CSS 小三角，统一见手写与布局 · CSS 布局实操。

移动端适配方案：rem、vw/vh、rpx 的区别？

方案	相对谁	特点	常见场景
`rem`	根元素 `html` 的 `font-size`	改根字号，整页按比例缩放；常配合 flexible / postcss-pxtorem	H5 按设计稿等比适配
`vw` / `vh`	视口宽 / 高（`100vw` = 屏宽）	直接跟屏幕走，不用改根字号；过大过小要做限制	现代 H5、响应式间距/字号
`rpx`	小程序约定：屏宽 = `750rpx`	不是标准 CSS，是微信等小程序运行时换算	UniApp / 微信小程序

补充：

em 相对父元素字号，容易层层嵌套算晕；适配多用 rem 而不是 em
实际项目也常见：vw 写布局 + 限制最大最小字号；或 UniApp 里直接写 rpx

🎤 口述精简版

rem 跟根字号走，改 html 的 font-size 就能整体缩放；vw/vh 直接按视口百分比；rpx 是小程序单位，规定屏宽 750rpx，写起来像 px，运行时自动换算。H5 常用 rem 或 vw，小程序/UniApp 常用 rpx。

Vue 中 `:deep()` 和 `/deep/` 的作用和区别？

为什么需要它们

Vue 单文件组件开了 scoped 后，样式默认只作用于当前组件。想改子组件内部的样式，就要用深度选择器穿透。

写法对比

写法	说明
`:deep()`	Vue3 推荐写法，如 `:deep(.child-class) { }`
`/deep/`、`>>>`	旧写法；`>>>` 在 sass/less 里常不好用，多用 `/deep/`
`::v-deep`	Vue2 时期常见过渡写法

vue

<style scoped>
/* Vue3 推荐 */
:deep(.el-input__inner) {
  border-radius: 8px;
}
</style>

区别（怎么说）

作用一样：都是让样式穿透到子组件
区别在版本与推荐度：Vue3 + Vite 项目用 :deep()；/deep/、>>> 是历史写法，新项目不优先用
能改自己模板里的类就别乱穿透，避免样式耦合太深

🎤 口述精简版

scoped 样式默认穿不进子组件。要用深度选择器：Vue3 写 :deep()，老项目可能看到 /deep/ 或 >>>。作用都是穿透，区别主要是语法世代，现在统一用 :deep()。

CSS 动画和过渡的区别？常用场景？

核心区别

	`transition` 过渡	`animation` 动画
触发	通常要有状态变化（hover、class 切换）	可自动播放，不必等交互
中间态	只有起点 → 终点	可用 `@keyframes` 定义多段关键帧
循环	一般播一次	可 `infinite` 循环
控制力	简单属性变化	更复杂的时间线、延迟、方向

常用场景

transition：按钮 hover 变色、展开收起高度/透明度、弹层淡入淡出
animation：loading 旋转、骨架屏闪烁、进场循环动效、需要多步骤的表演式动画

css

/* 过渡 */
.btn {
  transition: background-color 0.2s ease;
}

/* 动画 */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.loading {
  animation: spin 1s linear infinite;
}

性能提醒：优先改 transform、opacity，少动画触发重排的属性（宽高、top/left）。

🎤 口述精简版

transition 是过渡，得有状态变化才播，适合 hover、开关类交互；animation 是动画，能自己播、能循环、能设多个关键帧，适合 loading、进场这类。简单交互用过渡，复杂或循环用动画。

3. 样式预处理器：Less / SCSS

浏览器只认 CSS。Less / Sass（常用 SCSS 语法）在构建期编成 CSS。和「运行时 CSS 变量」不是替代关系，常一起用。

Less、SCSS 是什么？和手写 CSS 差在哪？

	原生 CSS	Less / SCSS
何时生效	浏览器直接解析	需 loader / Vite 插件先编译
变量	现在有 `--var`（运行时可改）	`$` / `@` 编译期变量，打包后就是普通值
能力	选择器 + 属性	嵌套、混合（mixin）、继承、运算、模块化 import

SCSS 是 Sass 的一种语法，写法更接近 CSS（带大括号）。Less 能力类似，生态和语法细节不同。Vue / Vite 项目里常见 lang="scss"。

适合：大项目样式复用、主题色统一、少写重复选择器。不适合：指望它解决运行时换肤（那更靠 CSS 变量）。

🎤 口述精简版

Less、SCSS 是 CSS 预处理器，写变量、嵌套、mixin，构建时编成普通 CSS。浏览器不直接跑它们。和 CSS 变量比：预处理器变量编译期就定死了；--var 可以运行时改，换肤更常用 CSS 变量。

HTML + CSS ​

1. HTML 核心 ​

什么是 HTML 语义化标签？常用语义化标签有哪些？好处是什么？ ​

1. 什么是语义化标签 ​

2. 常用语义化标签 ​

3. 使用语义化的好处 ​

4. 口头描述 ​

H5 新增特性有哪些？ ​

1. 语义化标签 ​

2. 表单增强 ​

3. 多媒体标签 ​

4. 图形绘制 ​

5. 本地存储 ​

6. 新 Web API（高频） ​

7. 其他新增 ​

8. 口头描述 ​

CSS3 新增特性有哪些？ ​

1. 视觉增强 ​

2. 背景与渐变 ​

3. 变换 transform（2D / 3D） ​

4. 过渡与动画 ​

5. 布局与适配 ​

6. 其他常用 ​

🎤 口述精简版 ​

2. CSS 原理与布局概念 ​

标准盒模型和 IE 怪异盒模型的区别？如何切换？ ​

核心区别 ​

如何切换 ​

🎤 口述精简版 ​

CSS 选择器优先级规则、权重计算方式？ ​

常见样式怎么写 ​

权重怎么算（记四级） ​

还要记住的几条 ​

🎤 口述精简版 ​

什么是 BFC？触发条件、作用和使用场景？ ​

白话理解 ​

为什么会有那些问题 ​

怎么触发（记 4 类就够） ​

作用 & 场景 ​

🎤 口述精简版 ​

position 五个属性的区别和使用场景？ ​

五个值对比 ​

关键点记清 ​

🎤 口述精简版 ​

flex 布局常用属性？ ​

容器属性（写在父元素上） ​

子项属性（写在子元素上） ​

水平、垂直居中（最常用写法） ​

🎤 口述精简版 ​

flex: 1 是什么意思？ ​

🎤 口述精简版 ​

grid 布局的使用场景和常用属性？ ​

什么时候用 grid ​

常用属性 ​

🎤 口述精简版 ​

水平 / 垂直居中、两栏三栏（实操入口） ​

移动端适配方案：rem、vw/vh、rpx 的区别？ ​

🎤 口述精简版 ​

Vue 中 :deep() 和 /deep/ 的作用和区别？ ​

为什么需要它们 ​

写法对比 ​

区别（ 怎么说） ​

🎤 口述精简版 ​

CSS 动画和过渡的区别？常用场景？ ​

核心区别 ​

常用场景 ​

🎤 口述精简版 ​

3. 样式预处理器：Less / SCSS ​

Less、SCSS 是什么？和手写 CSS 差在哪？ ​

🎤 口述精简版 ​

HTML + CSS

1. HTML 核心

什么是 HTML 语义化标签？常用语义化标签有哪些？好处是什么？

1. 什么是语义化标签

2. 常用语义化标签

3. 使用语义化的好处

4. 口头描述

H5 新增特性有哪些？

1. 语义化标签

2. 表单增强

3. 多媒体标签

4. 图形绘制

5. 本地存储

6. 新 Web API（高频）

7. 其他新增

8. 口头描述

CSS3 新增特性有哪些？

1. 视觉增强

2. 背景与渐变

3. 变换 transform（2D / 3D）

4. 过渡与动画

5. 布局与适配

6. 其他常用

🎤 口述精简版

2. CSS 原理与布局概念

标准盒模型和 IE 怪异盒模型的区别？如何切换？

核心区别

如何切换

🎤 口述精简版

CSS 选择器优先级规则、权重计算方式？

常见样式怎么写

权重怎么算（记四级）

还要记住的几条

🎤 口述精简版

什么是 BFC？触发条件、作用和使用场景？

白话理解

为什么会有那些问题

怎么触发（记 4 类就够）

作用 & 场景

🎤 口述精简版

position 五个属性的区别和使用场景？

五个值对比

关键点记清

🎤 口述精简版

flex 布局常用属性？

容器属性（写在父元素上）

子项属性（写在子元素上）

水平、垂直居中（最常用写法）

🎤 口述精简版

`flex: 1` 是什么意思？

🎤 口述精简版

grid 布局的使用场景和常用属性？

什么时候用 grid

常用属性

🎤 口述精简版

水平 / 垂直居中、两栏三栏（实操入口）

移动端适配方案：rem、vw/vh、rpx 的区别？

🎤 口述精简版

Vue 中 `:deep()` 和 `/deep/` 的作用和区别？

为什么需要它们

写法对比

区别（怎么说）

🎤 口述精简版

CSS 动画和过渡的区别？常用场景？

核心区别

常用场景

🎤 口述精简版

3. 样式预处理器：Less / SCSS

Less、SCSS 是什么？和手写 CSS 差在哪？

🎤 口述精简版