第1天：HTML/CSS基础
今天开始系统复习前端基础知识，第一天聚焦 HTML 和 CSS。主要涉及语义化标签、盒模型、BFC、层叠上下文、Flex/Grid、移动端适配和 CSS 性能优化。以下是当天的问答整理。
Q1：语义化 HTML 有什么好处？你在项目中用过哪些语义化标签？
我的回答：
- 我曾经在项目中使用过<header>、<footer>、<nav>、<h1>、<button>等标签，减少了无意义的 <div> 堆叠，让代码结构更清晰。
- 语义化标签有利于 SEO（搜索引擎优化），帮助搜索引擎理解页面重点内容。
- 提高可访问性，屏幕阅读器能更好地朗读页面。
- 代码可读性和维护性更好，别人看代码时更容易理解各部分的作用。
补充：
- SEO 是 Search Engine Optimization 的缩写，指通过优化网站结构和内容，使其在搜索引擎中的排名更靠前。搜索引擎爬虫会分析 HTML 标签的含义，语义化标签能提供更准确的信息。
- 不要过度使用语义化标签，合理即可。例如，所有标题都用 <h1> 是不对的，应该按层级使用 <h1> 到 <h6>。
Q2：解释标准盒模型和怪异盒模型的区别。如何切换？
我的回答：
- 标准盒模型（content-box）：width 和 height 只包含内容区域（content），不包含 padding 和 border。实际占据宽度 = width + padding + border + margin。
- 怪异盒模型（border-box）：width 和 height 包含内容、padding 和 border。实际占据宽度 = width + margin。
- 切换方式：使用 CSS 属性 box-sizing，默认值为 content-box，设置为 border-box 即可启用怪异盒模型。
补充：
- 在项目中，经常全局设置 * { box-sizing: border-box; }，这样设置宽度时就不用担心 padding 和 border 撑大元素，布局更直观。
- 例如，一个按钮设置 width: 100px; padding: 10px;，在 border-box 下，按钮总宽度就是 100px，padding 向内挤压；在 content-box 下，总宽度是 120px，容易破坏布局。
Q3：什么是 BFC？如何创建？有什么应用场景？
我的回答：
- 这个概念我之前不太了解，需要补充。
补充：
- BFC（Block Formatting Context，块级格式化上下文）是页面上的一个独立渲染区域，内部元素的布局不会影响外部，外部也不会影响内部。
- 常见的创建 BFC 的方式：
- 根元素<html>本身就是天然的BFC；
float 不为 none;position: absolute或fixed；display: inline-block、table-cell、flex、grid、flow-root;overflow: hidden、auto、scroll（不为visible）。
应用场景：
- 清除浮动：父容器没有高度时，内部子元素浮动会导致父容器高度塌陷。给父容器创建 BFC（如 overflow: hidden）可以包含浮动，撑起高度。
- 防止 margin 重叠：两个相邻块级元素的上下 margin 会合并。如果把其中一个放在 BFC 内，它们就不会重叠。
- 自适应布局：利用 BFC 不与浮动元素重叠的特性，可以实现两栏自适应布局（左边固定宽浮动，右边 overflow: hidden 触发 BFC），自动填充剩余空间。
Q4：什么是层叠上下文？z-index 为什么会失效？
我的回答：
- z-index 决定了元素在Z轴上的显示顺序。
补充：
- 层叠上下文是 HTML 元素在三维空间中的概念，决定了元素在 Z 轴上的显示顺序（谁在上层，谁在下层）。
- z-index 失效的常见原因：
- 元素没有设置 position 定位（默认为 static），z-index 无效。
- 子元素的 z-index 不会跨父级比较—— 父元素在根上下文中的层叠顺序，决定了子元素的 “基础层级”，子元素的 z-index 仅能在父元素内部调整顺序。
- 当元素通过 opacity < 1/transform/filter 等属性创建新的层叠上下文后，该元素会成为一个独立的 “层叠容器”，它的所有子元素的 z-index 都只能在这个容器内部比较，无法突破容器和外部元素的 z-index 竞争。
如何解决：
- 确保元素 position 为 relative、absolute、fixed 或 sticky。
- 理解层叠上下文的创建条件，避免在不必要的地方创建新的上下文。
Q5：你在项目中常用 Flex 还是 Grid？为什么？如果实现响应式网格，你会怎么做？
我的回答：
- 我常用 Flex，因为它对元素排版比较方便，比如水平对齐、垂直对齐。
- 对于响应式网格，我会使用媒体查询配合 rem 单位，设置根元素的 font-size 根据屏幕大小变化。
补充：
Flex适用于一维布局（行或列），比如导航栏、卡片列表的水平排列。
Grid适用于二维布局（同时处理行和列），比如整个页面的布局、照片墙、商品网格。
Flex 和 Grid 的区别：
| 维度 | Flex | Grid |
|---|---|---|
| 布局维度 | 一维（行或列） | 二维 |
| 使用场景 | 组件内部对齐、小规模布局 | 整体页面布局、复杂网格 |
| 内容驱动 | 由内容决定尺寸 | 由容器定义网格 |
- eg: 响应式歌单网格实现（Grid 版）：
可以 配合媒体查询调整列数。
.song-grid { display: grid; //auto-fill 自动填充，minmax(150px, 1fr) 表示每个单元格至少 150px，如果空间允许，等分剩余空间。 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }Q6：如何做移动端适配？
我的回答：
- 我会设置以 rem 为单位的固定 font-size，然后根据屏幕大小动态调整根元素的 font-size。
- 使用媒体查询处理特殊尺寸。
补充：
- 完整方案：
- 视口设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> rem 原理：
rem是相对于根元素<html>的font-size的单位。动态设置根元素的font-size，所有使用rem的元素会等比例缩放。动态计算根元素 font-size（以 375px 设计稿为例，1rem = 100px 方便计算）：
document.documentElement.style.fontSize = (window.innerWidth / 3.75) + 'px';媒体查询辅助：针对特殊尺寸微调布局。
Q7：你在项目中如何组织 CSS？有哪些 CSS 性能优化技巧？
我的回答：
- 我在项目中使用 styled-components，它是 CSS-in-JS 方案，样式与组件绑定，避免全局污染，动态样式方便。
- 性能优化方面了解不多。
补充：
- styled-components 的优点：样式隔离、动态样式、自动前缀、可维护性好。
- styled-components 的缺点：运行时开销、不利于代码分割、SSR 需额外配置。
- CSS 性能优化技巧：
- 避免过深的选择器：如 .nav ul li a span，尽量用类名。
- 使用 transform 和 opacity 做动画：可由 GPU 加速，不触发重排（reflow）和重绘（repaint）。避免用 top、left。
- 代码分割：按需加载 CSS。
- 使用 CSS 变量：方便主题切换，减少重复代码。
今日总结
| 概念 | 要点 |
|---|---|
| 语义化标签 | header、footer、nav、h1 等，利于 SEO、可访问性和代码可读性 |
| 盒模型 | content-box（标准） vs border-box（怪异），用 box-sizing 切换 |
| BFC | 独立渲染区域，通过 overflow、float、position 等创建，用于清除浮动、防止 margin 重叠等 |
| 层叠上下文 | 决定 Z 轴顺序，z-index 失效常因 position 未设置或新上下文干扰 |
| Flex vs Grid | Flex 一维，Grid 二维；响应式网格用 grid + auto-fill/minmax 更简洁 |
| 移动端适配 | viewport + rem（动态根 font-size）+ 媒体查询 |
| CSS 性能优化 | 避免深选择器、用 transform/opacity 做动画、减少重排、代码分割 |