HTML 与 CSS

复习方式：先遮住答案口述 30～90 秒，再核对关键点；“追问与易错点”用于进一步练习。

1. 语义化 HTML 有什么价值？

展开答案与追问

参考答案： 用与内容含义匹配的标签，例如 main、nav、article 和 button。它有利于辅助技术、文档结构和维护；搜索引擎也更容易理解内容。能用原生按钮就不要用 div 模拟，原生控件自带键盘交互和语义。

追问与易错点： 如何让一个图标按钮可被屏幕阅读器理解？给按钮提供可访问名称，例如 aria-label，同时保留焦点样式。

2. 标准盒模型与 border-box 有什么区别？

展开答案与追问

参考答案： content-box 的 width/height 只包含内容区，实际占用还需加 padding 和 border；border-box 的声明尺寸包含内容、内边距和边框。margin 始终在盒外。项目中常统一设置 box-sizing: border-box。

追问与易错点： width: 100px、padding: 10px、border: 1px 时，两种模型的边框盒宽分别是 122px 和 100px。

3. CSS 选择器优先级如何比较？

展开答案与追问

参考答案： 先判断来源、重要性和层叠层等层叠条件，再在同等条件下比较选择器权重：ID、类/属性/伪类、标签/伪元素逐级比较；相同则后声明获胜。内联普通样式通常优先于样式表中的普通声明。!important 不是增加选择器权重。

追问与易错点： 不要简单把权重理解为十进制相加；:where() 的特异性为零，:is() 取参数中最高特异性。

4. BFC 是什么？解决哪些问题？

展开答案与追问

参考答案： BFC 是块级格式化上下文，内部块布局相对独立。常用于包含浮动、避免与浮动重叠、隔离部分外边距折叠。display: flow-root 是表达建立 BFC 的直接方式；overflow: auto 也可建立 BFC，但可能带来滚动行为。

追问与易错点： flex/grid 容器有各自的格式化上下文，不宜把所有独立布局都笼统称为 BFC。

5. Flex 与 Grid 如何选择？

展开答案与追问

参考答案： Flex 适合一条主轴上的排列与空间分配；Grid 适合行列共同约束的二维布局。Flex 换行后每行独立分配空间，Grid 更适合跨行列对齐。可在页面级 Grid 中嵌套组件级 Flex。

追问与易错点： Flex 子项文本为什么撑破容器？默认最小尺寸可能阻止收缩，可按需要设置 min-width: 0。

6. 如何水平垂直居中？

展开答案与追问

参考答案： 已知或未知尺寸都可使用父容器 display: grid; place-items: center，或 Flex 配合 justify-content: center 与 align-items: center。绝对定位配合 top/left: 50% 和 transform: translate(-50%, -50%) 也可，但需要合适的定位包含块。

追问与易错点： 先确认居中的是盒子、文本还是行内内容，以及父容器是否有确定高度。

7. position 的常见取值有什么区别？

展开答案与追问

参考答案： relative 保留原占位并相对自身偏移；absolute 脱离普通流，相对其定位包含块；fixed 通常相对视口，但 transform 等祖先属性可能改变包含块；sticky 在滚动阈值内类似相对定位，达到阈值后吸附，并受包含块约束。

追问与易错点： sticky 失效时检查 inset、最近滚动祖先、父容器高度和可滚动空间。

8. 响应式布局如何实现？

展开答案与追问

参考答案： 使用弹性尺寸、Flex/Grid、媒体查询和响应式图片。rem 相对根字体，em 的含义随属性而异，vw/vh 相对视口；移动端可结合 dvh 适应动态视口。断点按内容是否需要重新排布确定。

追问与易错点： 图片使用 srcset/sizes 或 picture，并提供 width/height 或 aspect-ratio 预留空间。

9. display:none、visibility:hidden、opacity:0 有何区别？

展开答案与追问

参考答案： display:none 不生成布局盒；visibility:hidden 保留布局空间且通常不能交互；opacity:0 保留布局和命中测试，仍可能获得焦点。透明不等于从可访问性树或交互中移除。

追问与易错点： 隐藏弹层应一并考虑键盘焦点、辅助技术和鼠标命中，而非只改变透明度。

10. 重排、重绘和合成是什么？

展开答案与追问

参考答案： 布局计算几何尺寸与位置，绘制生成视觉内容，合成组合图层。改变尺寸常触发布局与绘制；改变颜色通常需要绘制；transform/opacity 的动画在条件合适时可只走合成。是否独立合成取决于浏览器与实际页面。

追问与易错点： 不要对所有元素设置 will-change，过多图层会消耗内存。