display: contents 不能当“透明容器”用，因其虽移除父元素渲染框但破坏可访问性与表单语义：label 无法聚焦 input、屏幕阅读器跳过子节点；仅适用于无语义的纯布局剥离场景，含表单或 ARIA 时需改用 grid 或 visibility: hidden + position: absolute；IE 不支持，须 @supports 兜底。
为什么 display: contents 不能当“透明容器”用
它确实会让父元素不参与渲染流，但会破坏可访问性与表单语义——屏幕阅读器可能跳过其子节点，label 绑定 input 时也可能失效。
常见错误现象：display: contents 包裹的 div 里有 input 和 label，点击 label 不聚焦 input；Lighthouse 报告“label 未正确关联控件”。
- 仅适用于纯布局剥离场景，比如 Grid/Flex 容器需要跳过某一层 DOM，且该层不含语义化子元素
- 若含表单控件、焦点元素或 ARIA 属性，改用
display: grid+grid-template-areas或显式visibility: hidden+position: absolute替代 - IE 完全不支持，
@supports (display: contents)必须兜底
Bootstrap 的 container 类在 Flex 布局里为什么塌陷
因为 .container 默认设了 max-width 和 margin: 0 auto，但当父容器是 display: flex 时，这些 margin 不再触发块级居中逻辑，反而被 flex 主轴忽略。
使用场景：在 header 或 nav 内嵌 .container，结果内容贴左、宽度异常收缩。
立即学习“前端免费学习笔记（深入）”；
- Flex 容器内，
.container需额外加flex: 0 0 auto或align-self: center（取决于主轴方向） - 更稳妥做法是放弃
.container，直接用max-width+margin-inline: auto（现代写法）或margin: 0 auto并确保父级非 flex - Bootstrap 5+ 的
.container-fluid在 flex 中表现更稳定，但会失去断点控制
gap 在 Grid 和 Flex 中的行为差异
Grid 中 gap 是真正的“轨道间隙”，不影响子项尺寸；Flex 中 gap 是“项目间空隙”，但老版 Safari（
性能影响：Grid 的 gap 触发 layout，但比用 margin 更轻量；Flex 的 gap 在部分旧引擎中会引发额外重排。
- Grid 布局优先用
gap，无需担心子项溢出 - Flex 布局若需兼容 Safari margin-right +
:last-child { margin-right: 0 } -
row-gap/column-gap在 Grid 中可独立设置，Flex 中只支持gap（即同时作用于主轴和交叉轴）
Tailwind 的 sr-only 类为什么有时不起作用
它本质是 position: absolute; width: 1px; height: 1px; 等组合，但若父元素有 overflow: hidden 或 transform，会导致 screen reader 元素被裁剪或脱离可读流。
常见错误现象：用 sr-only 隐藏按钮文字，VoiceOver 仍朗读空按钮；或隐藏的 span 在 Chrome DevTools 的 Accessibility 面板里显示为“not exposed”。
- 检查父级是否含
overflow: hidden、clip-path、transform（哪怕只是transform: translateZ(0)） - 替代方案：用
aria-hidden="true"+visually-hidden（自定义类，不依赖position: absolute） - 真正需要隐藏又保留语义时，优先用
aria-label或aria-labelledby，而非视觉隐藏
复杂点在于：CSS 可访问性不是单纯“看不见就行”，而是“看不见但机器能读、键盘能达、逻辑不破”。很多布局技巧一碰 screen reader 就露馅，得随时用 axe 或 Lighthouse 验证。
