display常用值包括block（独占一行，可设宽高）、inline（行内流，忽略宽高和垂直margin）、inline-block（兼具行内定位与块级特性）、flex和grid（启用弹性/网格布局，改变子元素布局上下文）；display:none彻底移除渲染，visibility:hidden和opacity:0保留布局位置；需注意切换时float、vertical-align等属性失效及HTML换行间隙问题；推荐用class切换而非JS直接操作style；display:contents使元素自身不渲染但保留子元素，影响选择器且兼容性有限。
display 属性有哪些常用值及其布局行为
display 是控制元素“显示类型”的核心 CSS 属性，它直接决定元素在文档流中的布局角色。不是所有值都只是“显隐开关”，多数会彻底改变盒模型行为和子元素排列逻辑。
常见值中：block 让元素独占一行、可设宽高；inline 保持行内流、忽略宽高和垂直 margin；inline-block 兼具行内定位与块级盒特性；flex 和 grid 则分别启用弹性布局和网格布局——它们不仅改变自身显示类型，还会让子元素进入全新布局上下文。
注意：display: none 不仅隐藏，还从渲染树中移除，不占空间；而 visibility: hidden 或 opacity: 0 仍保留布局位置，这点常被混淆。
用 display 切换布局时要注意的继承与重置问题
设置 display: flex 后，子元素默认变成 flex-item，其 float、clear、vertical-align 失效；设为 grid 后，float 和 display: inline 等也会被忽略。这些不是“兼容性问题”，而是规范强制行为。
立即学习“前端免费学习笔记（深入）”；
切换前需检查是否残留旧布局的副作用：
- 已设
float: left的子元素，在父级改为display: flex后不会自动归位，建议显式重置为float: none - 使用
display: inline-block实现多列时，HTML 中的换行符会产生间隙，改用flex可天然规避 - 从
grid切回block时，原grid-column/grid-row声明失效但不报错，容易误以为样式还在生效
响应式中用 JavaScript 动态切换 display 的隐患
用 JS 控制 element.style.display = 'flex' 看似简单，但容易引发样式冲突和维护困难：
- 内联样式优先级高于外部 CSS，可能覆盖媒体查询中精心写的
display: grid - 若多个脚本反复写
display，易出现竞态，比如 A 脚本设为none，B 脚本紧接着设为flex，但中间状态被用户看到 - 更好的做法是切换 class：
el.classList.toggle('is-flex')，再在 CSS 中统一定义.is-flex { display: flex; }
另外，不要用 display 模拟“禁用”状态——应结合 pointer-events: none 和 opacity: .6，否则键盘焦点、屏幕阅读器仍可访问该元素。
display: contents 的特殊用途与兼容性陷阱
display: contents 让元素自身“消失”（不渲染盒，但保留子元素），常用于语义化标签（如 ）不希望引入额外盒模型干扰时。但它不是“透明容器”：
- 该元素上的背景、边框、内边距全部失效
- 子元素会直接成为其父元素的子项，层级关系变化，可能导致 CSS 选择器（如
parent > child）意外失效 - IE 完全不支持；iOS Safari 15.4 之前对
:focus-within和display: contents组合有 bug
调试时若发现元素“看不见却占位”，或子元素样式突然错乱，先查是否误用了 display: contents。
