使用 display: contents 可以让元素自身不生成任何盒模型，仅保留其子元素在文档流中的位置，从而消除无语义嵌套节点对布局的影响。具体做法是在需要移除的容器上设置该属性，这样父级布局容器（如 flexbox 或 grid）就能直接“看到”并排列这些子元素，无需修改 html 结构。
如何验证 display contents 对 Flex 布局的影响
当父容器使用 Flex 布局时，应用了 display: contents 的元素会消失，其子元素会直接成为 Flex 容器的直接子项。这意味着子元素将继承父容器的 Flex 属性（如 flex-grow、align-items），而不是被包裹在一个新的弹性项目盒子中。这种行为消除了额外的层级，使得间距和对齐更易于控制。
<div style="max-width:90%">
<div style="display: contents;">
<span>Item A</span>
<span>Item B</span>
</div>
<span>Item C</span>
</div>预期结果：三个 span 元素水平排列，彼此间距为 10px。如果没有 display: contents，中间的 div 会作为一个整体占据空间，导致内部两个 span 紧贴在一起，而它们与外部 span 之间没有间距。
立即学习“前端免费学习笔记（深入）”；
如何验证 display contents 对 Grid 布局的影响
在 CSS Grid 布局中，display: contents 同样会让元素隐去，其子元素直接参与网格定位。子元素会自动获取网格轨道的尺寸和对齐方式，就像它们是网格的直接子项一样。这对于处理复杂的卡片组件或列表项非常有用，可以避免在 HTML 中添加多余的包装器来适应网格布局。
<div style="max-width:90%">
<div style="display: contents;">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
<div class="card">Card 3</div>
</div>预期结果：三个 .card 元素均匀分布在三列中，间距为 10px。如果移除 display: contents，中间的 div 会占据整个第一列，其内部的两个 .card 会在该列内堆叠，破坏预期的网格分布。
基于 display contents 元素的伪类选择问题
由于应用了 display: contents 的元素在渲染树中不存在，因此无法通过 CSS 伪类（如 :hover）或 JavaScript 直接选中该元素本身。任何试图对该元素添加背景色、边框或监听事件的操作都会失效，因为浏览器根本看不到这个节点。开发者必须将样式或交互逻辑应用到其子元素或父元素上，或者考虑是否真的需要移除该节点，有时简单的 visibility: hidden 或 position: absolute 可能是更合适的替代方案，具体取决于是否需要保留该元素在无障碍树中的存在。
