CSS 高频追问 Q&A

CSS 高频追问 Q&A

1. Q: BFC 的核心作用？

A: 解决外边距折叠、包裹浮动、隔离布局影响。（深入阅读：BFC 原理与应用）

2. Q: position: absolute 的参照物是什么？

A: 最近的非 static 定位祖先，否则是初始包含块。（深入阅读：包含块、定位与粘性失效）

3. Q: Flex 和 Grid 怎么选？

A: 一维布局优先 Flex，二维复杂布局优先 Grid。（深入阅读：Flexbox 弹性布局、Grid 网格布局）

4. Q: 回流和重绘区别？

A: 回流会触发布局计算，代价更高；重绘只更新外观。（深入阅读：回流与重绘）

5. Q: 常见性能优化？

A: 减少深层选择器、避免频繁改布局属性、优先 transform/opacity。（深入阅读：CSS 性能优化）

6. Q: 为什么 Flex 子项的省略号不生效？

A: 子项默认 min-width: auto，最小尺寸可能由内容决定，无法收缩。设置 min-width: 0，再配合 overflow、white-space 和 text-overflow。（深入阅读：Flexbox 弹性布局、文本溢出省略）

7. Q: display: none、visibility: hidden 和 opacity: 0 怎么选？

A: 看是否占位、是否需要动画和是否允许交互。opacity: 0 仍可能响应事件和获得焦点，交互组件还要处理 pointer-events、焦点和 ARIA 状态。（深入阅读：隐藏页面元素的方法）

8. Q: CSS 百分比到底相对什么计算？

A: 取决于属性和包含块：宽高通常相对包含块对应尺寸，padding/margin 百分比传统上以包含块宽度为参照，vw/vh 相对视口，em/rem 相对字体大小。（深入阅读：CSS 单位区别、包含块、定位与粘性失效）

9. Q: CSS 像素、设备像素、DPR 和 PPI 有什么区别？

A: CSS 像素是布局单位，设备像素是屏幕点阵，DPR 近似表示二者比例，PPI 是物理屏幕密度，不能直接等同。（深入阅读：设备像素与 CSS 像素）

10. Q: 为什么不建议多层 @import？

A: 它容易形成串行依赖并延迟样式可用时间；通常用 link 或构建工具合并/拆分样式，并把关键 CSS 放在首屏路径。（深入阅读：CSS 性能优化）

11. Q: BFC 和层叠上下文是一回事吗？

A: 不是。BFC 管块级布局隔离，层叠上下文管 z 轴绘制顺序；某些属性会同时触发两者，但不能互相替代。（深入阅读：BFC 原理与应用、层叠上下文与 z-index）