display: none 彻底移除元素不占空间，visibility: hidden 仅隐藏但保留布局位置且子元素继承；block 独占一行可设宽高，inline 同行排列忽略宽高，inline-block 兼具两者特性；flex/grid 启用新布局上下文，影响子项排列与对齐；display: contents 移除自身盒子仅渲染子节点，损害语义与可访问性。
display: none 和 visibility: hidden 的本质区别
两者都让元素“看不见”，但行为完全不同：display: none 会彻底从渲染树中移除元素，不占文档流空间，也无法被聚焦或触达；visibility: hidden 仅隐藏视觉呈现，元素仍占据布局位置，且子元素默认继承该状态（除非显式重置为 visibility: visible）。
常见误用场景：想实现“淡入”动画时用了 display: none → 动画失效，因为元素在动画开始前就已脱离渲染树。此时应配合 opacity 和 visibility 控制。
block、inline、inline-block 的布局表现差异
这三者决定元素如何参与文档流和尺寸计算：
-
display: block：独占一行，宽度默认撑满父容器，可设置宽高、内外边距 -
display: inline：与其他内联元素同行排列，忽略width/height，垂直方向的margin和padding不影响布局（但有视觉填充） -
display: inline-block：保留内联特性（可同行显示），同时支持宽高与完整盒模型（margin/padding全生效）
典型踩坑：用 inline 元素做按钮却设了 height，结果无效；改用 inline-block 或 block 即可。
立即学习“前端免费学习笔记（深入）”；
flex 和 grid 是 display 的“高级取值”，不是替代方案
display: flex 和 display: grid 并非单纯控制“显隐”或“行内/块级”，而是启用全新的布局上下文——它们会改变子元素的排列逻辑、对齐方式和尺寸分配规则。
关键注意点：
- 一旦设为
display: flex，子元素的float、clear、vertical-align失效 -
display: grid下，子元素的display值会被重置为block（不影响网格项定位，但影响其内部内容流） - 不要为了“让几个 div 横排”盲目套
flex；简单场景用inline-block更轻量
display: contents 的隐蔽副作用
display: contents 让元素自身不生成盒子，只渲染其子节点——看似“透明”，实则破坏语义和可访问性。
风险点：
- 屏幕阅读器可能跳过该元素及其所有子节点（因 DOM 节点未生成渲染盒）
- JavaScript 中通过
getBoundingClientRect()获取该元素位置会返回空矩形 - 父元素的
border或background不会包裹其子内容（因为它没盒）
它适合用于纯结构包装（如无意义的 <div> 套层），但别用在需要语义、焦点管理或样式锚点的地方。</div>
