display: none 是真删，visibility: hidden 是假藏；前者触发重排、移出渲染树、表单不提交，后者保留占位、仅跳过绘制、子元素可破防。
用 display: none 是真删，用 visibility: hidden 是假藏——前者让元素彻底退出布局，后者只是“闭眼”，位置、尺寸、事件响应逻辑全还在。
display: none 会触发重排，别在动画里硬切
每次设 display: none 或从它切回来，浏览器必须重新计算整个父容器的布局（reflow），代价高。尤其在滚动中频繁切换（比如虚拟列表、折叠面板），容易卡顿。
- 不能对
display做 CSS transition：写transition: display 0.3s完全无效 - 子元素无论怎么设
display: block都不会显示——父级已不在渲染树里 -
offsetHeight、getBoundingClientRect()返回全是0，但document.getElementById('x')仍能取到节点 - 表单里的
input设了display: none后，提交时不会带值，也不会触发focus()
visibility: hidden 保留占位，但子元素能“睁眼”
visibility: hidden 只跳过绘制（repaint），不碰布局，所以性能更轻。但它可继承，且子元素能用 visibility: visible 主动破防。
- 父级
visibility: hidden，子元素加visibility: visible就能单独显示——这常被误用成“局部显示”，结果布局错乱 -
visibility: hidden元素本身仍可focus()（如果它原本可聚焦），但鼠标事件默认不响应；加pointer-events: auto也救不回来，得靠父级设pointer-events: none+ 子级设pointer-events: auto - 屏幕阅读器可能读出它（取决于 UA），要真正隐藏语义，得配
aria-hidden="true" -
offsetHeight返回真实值，适合做尺寸判断后动态显隐
想淡入淡出？别只靠 visibility 或 opacity 单干
单用 opacity: 0 元素还响应点击；单用 visibility: hidden 没过渡效果。二者得捆一起用，且注意顺序：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 进出场都要同时控制
visibility和opacity，否则中间帧会“闪一下”或“悬空响应” - 推荐写法：
.fade-out { visibility: hidden; opacity: 0; transition: opacity 0.2s, visibility 0.2s; } - 不能写成
visibility: hidden立即生效 +opacity慢变，因为 visibility 切换是离散的，浏览器会直接跳到隐藏态 - Safari 旧版对
visibility + transition支持不稳定，上线前务必实测
display: contents 不是隐藏方案，别凑合用
display: contents 不会让元素消失，而是把它“掏空”：自身不生成盒子，子元素直接挂到父容器上参与布局。它和隐藏完全无关。
- 设了
display: contents的div，其border、padding、background全失效 - 子元素的
margin会和父级外层合并，布局行为突变，极易引发意料外的空白或重叠 - 它不改变可访问性树，屏幕阅读器仍会读出该节点（即使没渲染盒子），不能替代
display: none - 需要隐藏时，老实用
display: none或visibility: hidden，别拿contents顶包
最易被忽略的一点：用 display: none 隐藏表单控件时，querySelector('input:not([style*="none"])') 这类靠内联样式判断的逻辑会失效——因为 style.display 是 JS 设置的，不一定写在 style 属性里；更稳的方式是查 computed style：getComputedStyle(el).display === 'none'。
