HTML & CSS 是前端基础，但容易追到工程意识、浏览器机制和可维护性。本文整理语义化、布局、响应式与 CSS 工程实践。

HTML

语义化标签

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

语义化的价值分三层：

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

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

SEO 优化

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

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

传统 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 做位移动画更流畅，因为它通常不会改变文档流，不需要重新计算布局，浏览器可以把元素提升到合成层处理。

CSS 变量

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

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

可维护性

大型项目 CSS 可维护性涉及命名、作用域、复用、主题、响应式、性能和团队协作。常见方案有 BEM、CSS Modules、Scoped CSS、原子化 CSS、设计 token、组件边界。

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

小结

理解 HTML/CSS 时，建议按这个顺序组织思路：

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

比如 BFC：它创建独立布局区域，常用于清浮动、防止 margin 折叠；现在更推荐 display: flow-root，避免 overflow: hidden 带来的裁剪副作用。

代码示例

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

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

1
2
3
4
<div class="media">
  <img class="avatar" src="/avatar.png" alt="avatar">
  <div class="content">一段很长的内容...</div>
</div>
1
2
3
4
5
6
7
8
9
.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 等触发。

1
2
3
4
5
6
7
8
9
10
11
.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，内容太长时可能不愿意收缩，导致布局溢出。

1
2
3
4
5
6
7
8
9
10
11
12
.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 可以实现不写媒体查询的自适应卡片。

1
2
3
4
5
.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 通常只影响合成，不触发布局和绘制，因此更适合动画。

1
2
3
4
5
6
7
8
9
10
11
.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 做动画，因为会改变布局位置，可能触发布局和重绘。transform 不改变文档流，更容易走合成线程。

可访问性

无障碍涉及语义结构、键盘可达、焦点管理、ARIA、颜色对比、表单标签、弹窗焦点陷阱。

1
2
3
4
5
6
7
8
<button aria-expanded="false" aria-controls="menu">
  打开菜单
</button>

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

ARIA 的使用原则：优先使用原生语义元素。只有原生语义不足，或者自定义组件需要表达状态和关系时，才补 ARIA。错误的 ARIA 可能比没有更糟。