display: contents 的本质是“不建盒子”，即跳过盒模型创建，子元素直接受父容器布局规则影响；它不生成盒模型，故无尺寸、边距等样式，且不被所有元素支持，需用 @supports 检测并谨慎处理可访问性。
display: contents 不是“让盒模型消失”，而是从一开始就不生成盒模型——它跳过了盒模型创建这一步。
display: contents 的本质是“不建盒子”
浏览器渲染时，每个元素默认会根据 display 值生成对应类型的盒（block box、inline box、flex container box 等）。而 display: contents 是一个特殊指令：它告诉浏览器“别为这个元素造盒子，只处理它的子节点和伪元素”。所以不是“盒子被删了”，是压根没造。
这意味着：
-
getComputedStyle(el).display返回"contents"，但 DevTools 的 Layout 面板里找不到该元素对应的 layout box - 它没有
offsetWidth/offsetHeight，getBoundingClientRect()返回全 0 -
margin、padding、border、width、height全部失效——因为这些属性都依附于盒模型存在 - 父容器的 flex/grid 布局规则会直接作用于它的子元素，就像它们是父容器的直系子节点一样
哪些元素设了也白设？
不是所有 HTML 元素都支持 display: contents。浏览器会静默忽略，回退到默认行为。典型无效场景包括：
立即学习“前端免费学习笔记（深入）”；
- 表格相关元素：
<table>、<code><tr>、<code><td> —— 表格模型强制要求层级盒结构 <li>替换元素（replaced elements）：<code><img alt="为什么设置了CSS display为contents后盒模型会直接消失？" >、<input>、<textarea></textarea>、<select></select>—— 它们自身有不可覆盖的渲染逻辑 - 部分旧版 Safari 中的
<button></button>—— 行为不稳定，建议实测 -
display: none：元素及其子元素全部从渲染树中移除，不占文档流，也不响应事件，aria-属性失效 -
display: contents：元素本身不建盒，但子元素照常渲染、可聚焦、能接收事件；aria-属性、tabindex、onclick全部保留 -
::before和::after伪元素仍会渲染（前提是content不为空或none） - 它不继承——必须显式写在目标元素上，
.wrapper > *这类选择器会失效，因为.wrapper没有渲染盒，无法作为父级上下文 - 必须用
@supports (display: contents)包裹样式，否则旧浏览器会直接跳过整段规则 - 不要指望它“不生效就当没写”——如果布局依赖它（比如让列表项变成 flex item），不支持时整个结构会塌掉
- 可访问性风险真实存在：屏幕阅读器可能因 DOM 层级和渲染层级错位产生混淆，尤其在表格或表单嵌套场景中
验证是否生效最直接的方式：用 JS 查 getComputedStyle(el).display === "contents"，再配合 DevTools 的 Layout 标签页确认盒是否存在。
和 display: none 的关键区别在哪
很多人误以为 display: contents 是“隐藏但保留子元素”，其实它和 display: none 在语义与行为上截然不同：
兼容性与降级必须手动处理
display: contents 在 IE 全系完全不支持，且部分老版本 Edge/Safari 支持有限。不能依赖自动降级：
真正容易被忽略的，是它对语义结构的“隐形切割”——DOM 树还在，渲染树却已重排，这种分离在复杂组件中可能引发焦点管理异常或测试断言失败。
