hidden 等价于 display: none，元素彻底退出文档流、不占空间；invisible 仅设 visibility: hidden 和 opacity: 0，仍占位、可交互、影响布局。
如何用 Tailwind CSS 的 hidden 和 block 类切换显示状态
直接加 hidden 就能隐藏元素，对应移除它或换上 block（或其他显示类如 flex、grid）就能显示——但关键在于别只记“显隐”，得看元素原本的 display 类型是否匹配。
比如一个默认是 inline 的 <span>，硬加 block 会破坏行内布局；而一个 Flex 容器里的子项，加 hidden 没问题，但恢复时用 flex 可能多余，用 flex-1 或保持原有 flex 类更稳妥。
-
hidden等价于display: none，元素彻底退出文档流，不占空间 - 恢复显示时，优先复用该元素本应具有的 display 类：
block、inline-block、flex、grid等 - 避免混用：不要在同一个元素上同时写
hidden和flex，后者会被前者覆盖失效
为什么 invisible 不等于隐藏？它和 hidden 的根本区别在哪
invisible 只是让元素「不可见」，但仍在文档流中占位；hidden 是「不存在」，完全不占空间。这个差别在布局塌陷、动画过渡、焦点管理上会立刻暴露。
- 表单里用
invisible隐藏按钮？它仍接收点击事件，且 tab 键能聚焦到它；hidden则彻底隔离 - 做淡入动画时，必须先用
invisible+opacity-0占位，再用opacity-100过渡；若用hidden，transition 根本不会触发 - 响应式场景下，
sm:hidden在小屏隐藏，但中屏以上恢复时，得明确指定显示类，否则可能仍是invisible状态
Bootstrap 5 中 d-none 和 d-block 的响应式写法要注意什么
Bootstrap 的 display 工具类支持断点前缀，但容易漏掉「反向断点」逻辑。比如 d-md-none 表示「中屏及以上隐藏」，而不是「仅中屏隐藏」。
立即学习“前端免费学习笔记（深入）”；
- 想实现「只在手机显示，平板起隐藏」，要写
d-block d-md-none：先设默认显示，再在中屏及以上关掉 - 别只写
d-sm-none，它会在小屏和所有更大屏幕都隐藏，因为断点类是「≥该尺寸生效」 - 如果元素原本是
display: inline，用d-block会改变布局流，必要时配合text-center或mx-auto微调对齐
用 CSS 自定义可见性工具类时，visibility: hidden 和 display: none 怎么选
自己写工具类时，别无脑复制框架。如果目标是「保留占位+禁用交互」，visibility: hidden 更合适；如果目标是「彻底移除+节省渲染开销」，才用 display: none。
-
visibility: hidden下的子元素无法通过visibility: visible显形，必须逐层设置；display: none则整棵子树都消失 - 动画中控制显隐，
visibility无法参与 transition，但可以配合opacity实现淡出后延迟隐藏 - 无障碍访问中，
display: none的内容对屏幕阅读器不可见；visibility: hidden同样不可见，但opacity: 0的内容仍可能被读取
实际项目里，多数“开关”需求用 hidden / d-none 就够了，但涉及动画、焦点、无障碍时，得停下来想两秒 display 和 visibility 的语义差异。
