display:none使元素彻底退出渲染树、不占空间、js获取尺寸为0；visibility:hidden仅隐藏视觉、保留位置和尺寸、子元素可设visible显示。
display 属性不是“设了就完事”的样式开关，它直接决定元素在文档流中是否存在、占不占空间、怎么排列——错用会引发布局塌陷、交互失效、甚至 JS 获取 offsetHeight 返回 0。
display: none 和 visibility: hidden 的根本区别
两者都让内容不可见，但行为完全不同：
-
display: none：元素彻底退出渲染树，不占文档流位置，父容器高度会塌缩，JS 查询getBoundingClientRect()或offsetTop全为0或undefined -
visibility: hidden：元素仍在渲染树中，保留原始尺寸和位置，只是像素不绘制；子元素可通过visibility: visible单独显示 - 常见误用：用
visibility: hidden实现“隐藏菜单”，结果点击区域还在，造成意外触发
inline、block、inline-block 之间切换的陷阱
改变 display 值会重置元素的盒模型行为，尤其影响宽高控制和换行逻辑：
-
display: inline下，width/height、margin-top/margin-bottom无效，但margin-left/margin-right有效 -
display: block后，原本内联的<span></span>或<a></a>会强制独占一行，可能破坏行内排版（比如导航栏突然换行） -
display: inline-block看似“两全”，但默认有空白间隙（来自 HTML 换行符），需用font-size: 0或注释消除，否则宽度计算不准
flex 和 grid 不是 display 的“高级替代”，而是布局范式切换
设 display: flex 或 display: grid 后，子元素的原有定位、浮动、对齐方式全部失效：
-
float、clear、vertical-align对 flex 子项完全无效 -
position: absolute子项仍可脱离文档流，但其top/left参照的是 flex 容器，不是最近定位祖先 - 不要在同一个容器上同时写
display: flex和display: grid—— 后者会覆盖前者，且无警告 - 兼容性注意：
display: grid在 IE11 中仅支持旧版语法（display: -ms-grid），需单独处理
真正难的不是记住八个值，而是理解每个值背后对应的渲染上下文——比如 display: table-cell 会让元素表现得像 <td>，但不会自动继承表格的边框合并或垂直对齐规则，这些细节不实测很容易掉坑里。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
