这篇文章对应「前端 + AI 知识体系」里的第一个大模块：HTML & CSS。面试里它看起来基础，但最容易被追问到工程意识、浏览器机制和可维护性。

HTML 面试核心

语义化标签

知识点讲解

语义化不是把 div 换成看起来更高级的标签，而是让页面结构对浏览器、搜索引擎、读屏软件和团队维护者都更清晰。常见标签包括 header、nav、main、article、section、aside、footer、h1 到 h6。

面试回答可以按三层说：

对机器友好：搜索引擎更容易理解页面主次。
对无障碍友好：读屏软件能更准确地跳转和朗读。
对团队友好：结构自解释，降低维护成本。

面试常问

问：为什么需要语义化？

答：语义化能提升可访问性、SEO 和可维护性。它让 HTML 不只负责展示，还表达内容结构。比如一篇文章用 article 包裹，导航用 nav，主要内容放在 main，这些信息可以被浏览器和辅助技术直接识别。

追问：section 和 article 有什么区别？

答：article 表示一块可以独立分发、独立理解的内容，比如博客文章、评论、新闻条目。section 表示页面中的一个主题分区，通常需要有标题，但不一定能独立存在。

SEO 优化

知识点讲解

前端 SEO 的重点是让搜索引擎更快、更准地理解页面内容。基础项包括唯一的 title、准确的 description、合理的标题层级、语义化结构、图片 alt、规范链接、站点地图和 SSR/SSG。

单页应用如果完全依赖客户端渲染，爬虫拿到的首屏 HTML 可能缺少关键内容。因此内容型页面更适合 SSR、SSG 或预渲染。

面试常问

问：SPA 为什么 SEO 比较弱？怎么优化？

答：传统 SPA 首次返回的 HTML 内容少，关键内容要等 JS 执行后才出现，爬虫抓取和索引会更不稳定。优化方式包括 SSR、SSG、预渲染、动态设置 meta、生成 sitemap、使用语义化标签，并保证核心内容能在初始 HTML 中出现。

Canvas、SVG 与 Web Components

知识点讲解

Canvas 是位图绘制，适合高频重绘场景，比如游戏、图表、粒子效果。SVG 是矢量描述，DOM 可访问，适合图标、地图、结构清晰的可交互图形。Web Components 用自定义元素、Shadow DOM 和模板封装组件，优点是跨框架，缺点是生态和状态管理体验通常不如主流框架。

面试常问

问：Canvas 和 SVG 怎么选？

答：如果图形数量多、更新频繁、主要靠绘制性能，优先 Canvas。如果图形需要缩放不失真、可被 DOM 访问、可绑定事件和样式，优先 SVG。

CSS 基础面试核心

盒模型

知识点讲解

盒模型由 content、padding、border、margin 组成。box-sizing: content-box 下，设置的宽高只包含内容区；border-box 下，宽高包含 content、padding 和 border，更符合工程布局直觉。

面试常问

问：为什么项目里常设置 box-sizing: border-box？

答：它让元素最终占用宽度更可控。比如宽度 200px 的按钮，增加 padding 和 border 后仍然是 200px，不会把布局撑开。

BFC

知识点讲解

BFC 是块级格式化上下文，可以理解为一块独立的布局区域。BFC 内部元素的布局不会影响外部，外部浮动也不会影响 BFC 内部。常见触发方式包括 overflow: hidden、display: flow-root、position: absolute、display: flex、display: grid。

面试常问

问：BFC 能解决什么问题？

答：常见用途有清除浮动、防止 margin 折叠、防止元素被浮动元素覆盖。现代写法里，如果只是创建 BFC，display: flow-root 比 overflow: hidden 更语义化，因为不会额外裁剪内容。

position 定位

知识点讲解

static 是默认文档流；relative 相对自身原位置偏移，并保留原空间；absolute 相对最近的非 static 祖先定位，并脱离文档流；fixed 相对视口定位；sticky 在滚动到阈值后表现为吸顶或吸底。

面试常问

问：absolute 相对谁定位？

答：相对最近的 position 不为 static 的祖先元素。如果找不到，就相对初始包含块，通常可以近似理解为视口或页面根。

CSS 布局与响应式

Flex

知识点讲解

Flex 是一维布局，适合处理一行或一列上的对齐、分布、伸缩。主轴由 flex-direction 决定，justify-content 控制主轴，align-items 控制交叉轴。常考属性包括 flex: 1、flex-basis、flex-shrink、gap。

面试常问

问：flex: 1 代表什么？

答：常见浏览器里它通常等价于 flex: 1 1 0%，表示项目可以放大、可以缩小，基础尺寸为 0，然后按剩余空间比例分配。

Grid

知识点讲解

Grid 是二维布局，适合同时控制行和列。它更适合页面骨架、卡片矩阵、复杂区域布局。常用能力包括 grid-template-columns、repeat、minmax、auto-fit、grid-area。

面试常问

问：Flex 和 Grid 怎么选？

答：一维排列优先 Flex，比如导航、按钮组、垂直居中。二维布局优先 Grid，比如页面整体结构、商品列表、仪表盘区域。

响应式单位

知识点讲解

rem 基于根元素字体大小，适合整体字号和间距缩放；vw 基于视口宽度，适合和屏幕宽度强相关的尺寸，但不能滥用于字体，否则容易在极端屏幕上过大或过小。工程中常用媒体查询、弹性网格、clamp()、容器查询组合解决响应式问题。

面试常问

问：移动端适配有哪些方案？

答：常见方案有媒体查询、百分比和弹性布局、rem 适配、vw/vh、clamp() 和容器查询。回答时要强调按场景组合，而不是只用一种单位解决所有问题。

CSS 高级与工程化

动画与性能

知识点讲解

CSS 动画常用 transition、transform、animation、keyframes。性能上优先动画 transform 和 opacity，因为它们通常能走合成线程，避免频繁触发布局和绘制。改变 width、height、top、left 更容易触发 layout 或 paint。

面试常问

问：为什么推荐用 transform 做位移动画？

答：transform 通常不会改变文档流，不需要重新计算布局，浏览器可以把元素提升到合成层处理，动画更流畅。

CSS 变量

知识点讲解

CSS 变量也叫自定义属性，可以在运行时继承和覆盖。它适合主题色、间距、圆角、暗黑模式等设计 token。和 Sass 变量不同，CSS 变量存在于浏览器运行时，可以被 JS 修改，也可以响应级联和媒体查询。

面试常问

问：CSS 变量和 Sass 变量有什么区别？

答：Sass 变量在编译时确定，产物里已经没有变量。CSS 变量在运行时生效，支持级联、继承、媒体查询和 JS 动态修改，更适合主题切换。

可维护性

知识点讲解

面试官问 CSS 时，最终常落到工程可维护性：命名、作用域、复用、主题、响应式、性能和团队协作。可以从 BEM、CSS Modules、Scoped CSS、原子化 CSS、设计 token、组件边界这些角度回答。

面试常问

问：大型项目如何避免 CSS 冲突？

答：可以用组件作用域方案，比如 CSS Modules、Vue scoped CSS、CSS-in-JS 或原子化 CSS；同时约束命名规范，抽象设计 token，避免全局选择器污染，减少过深选择器和隐式覆盖。

高频总结

回答模板

知识点讲解

基础题不要只背定义，最好按这个顺序回答：

先给一句准确结论。
再说应用场景。
补一个容易踩坑的点。
最后说工程实践。

比如问 BFC，不要只说“块级格式化上下文”，可以补充“它创建独立布局区域，常用于清浮动、防止 margin 折叠；现在更推荐 display: flow-root，避免 overflow: hidden 带来的裁剪副作用”。

本模块必背问题

知识点讲解

语义化的价值是什么？
section、article、div 怎么区别？
SPA 如何做 SEO？
Canvas 和 SVG 怎么选？
标准盒模型和 IE 盒模型区别是什么？
BFC 是什么，怎么触发，解决什么问题？
absolute、fixed、sticky 的定位参照是什么？
Flex 和 Grid 的选择标准是什么？
为什么动画优先使用 transform 和 opacity？
CSS 变量和预处理器变量有什么差异？

底层追问与代码示例

BFC、包含块与格式化上下文

知识点讲解

BFC 不是某个 CSS 属性，而是一套独立布局规则。BFC 内部的块级盒子垂直排列，内部浮动参与高度计算，BFC 区域不会和外部浮动重叠。

<div class="media">
  <img class="avatar" src="/avatar.png" alt="avatar">
  <div class="content">一段很长的内容...</div>
</div>

.avatar {
  float: left;
  width: 80px;
  height: 80px;
}

.content {
  display: flow-root;
}

display: flow-root 会创建 BFC，让 .content 不被浮动元素覆盖。相比 overflow: hidden，它不会因为溢出裁剪带来副作用。

面试常问

问：清除浮动为什么可以用 BFC？

答：BFC 计算高度时会包含内部浮动元素，所以父元素创建 BFC 后，高度不会因为子元素浮动而塌陷。

层叠上下文与 z-index

知识点讲解

z-index 只在同一个层叠上下文内比较。新的层叠上下文可以由 position + z-index、opacity < 1、transform、filter、isolation: isolate 等触发。

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
  isolation: isolate;
}

.modal {
  position: relative;
  z-index: 1;
}

面试常问

问：为什么 z-index 9999 仍然被盖住？

答：它可能处在一个较低的层叠上下文里。子元素的 z-index 再高，也只能在当前上下文内部排序，不能越级压过外部更高上下文。

Flex 收缩算法常见坑

知识点讲解

Flex 子项默认 min-width: auto，内容太长时可能不愿意收缩，导致布局溢出。

.row {
  display: flex;
  width: 300px;
}

.title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

min-width: 0 是很多复杂布局里必须写的细节，否则 flex: 1 不一定真的能压缩。

面试常问

问：flex: 1 为什么还会溢出？

答：因为 flex item 的默认最小尺寸可能由内容决定。长文本、长 URL、表格等内容会阻止收缩，需要显式设置 min-width: 0。

Grid 自适应卡片布局

知识点讲解

Grid 更适合二维布局。auto-fit + minmax 可以实现不写媒体查询的自适应卡片。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

auto-fit 会折叠空轨道，让已有卡片铺满；auto-fill 会保留空轨道。面试时能讲出这个差异会显得很扎实。

CSS 动画性能与合成层

知识点讲解

浏览器渲染大致分为 style、layout、paint、composite。transform 和 opacity 通常只影响合成，不触发布局和绘制，因此更适合动画。

.panel {
  transform: translateY(12px);
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
  will-change: transform, opacity;
}

.panel.is-open {
  transform: translateY(0);
  opacity: 1;
}

will-change 不能滥用。它可能提前创建图层，占用内存。只在确定会动画的元素上短期使用。

面试常问

问：为什么不建议用 top/left 做动画？

答：top/left 会改变布局位置，可能触发布局和重绘。transform 不改变文档流，更容易走合成线程。

可访问性不只是 alt

知识点讲解

专业前端要能讲无障碍：语义结构、键盘可达、焦点管理、ARIA、颜色对比、表单标签、弹窗焦点陷阱。

<button aria-expanded="false" aria-controls="menu">
  打开菜单
</button>

<nav id="menu" hidden>
  <a href="/notes/">笔记</a>
  <a href="/about/">关于</a>
</nav>