display: none 是唯一真正“消失”的方式；visibility: hidden 保留占位且子元素可覆盖隐藏，opacity: 0 仅透明但交互仍存在，需配合 pointer-events: none、tabindex="-1" 和 aria-hidden="true" 才安全。
display: none 是唯一真正“消失”的方式；visibility: hidden 和 opacity: 0 都只是“看不见”，但元素还在原地、仍可能响应事件——这点在表单、键盘导航、动画中极易翻车。
display: none 彻底移除，但会触发重排
元素从渲染树中被跳过，offsetWidth 和 offsetHeight 立即为 0，getBoundingClientRect() 返回全 0 值，子元素也一并不可见、不可交互。
- 表单控件（如
<input>）设为display: none后，不会出现在FormData中，也不会被form.elements包含 - 频繁切换（比如 hover 切换菜单）会引发浏览器重排（reflow），影响性能，动画中应避免
- 不支持 CSS
transition：写transition: display 0.3s完全无效 - Vue/React 中用
v-if或{condition && <div></div>}，底层就是靠它或直接删节点
visibility: hidden 保留占位，子元素能“钻出来”
元素仍在文档流中，占据原有空间，父容器高度不会塌缩；但默认不响应 pointer-events（点击穿透失效），也不可聚焦（除非显式加 tabindex）。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 关键区别：
visibility: visible可被子元素覆盖——父级设visibility: hidden，子元素写visibility: visible就能显示；display: none下子元素无论如何设display: block都无效 - 支持
transition，但只对visible → hidden有延迟隐藏效果；hidden → visible是立即生效，无过渡 - 适合做淡入淡出的中间状态：先设
visibility: hidden; opacity: 0，再用transition: opacity 0.2s+visibility: visible触发渐显 - 慎用于表单字段：用户仍可通过 tab 键聚焦到
visibility: hidden的<input>，导致键盘导航“卡空”
opacity: 0 看不见但“摸得着”，必须配对禁用交互
元素几何信息、z-index、事件监听器、tab 导航顺序全部保留，只是视觉透明。常见错误是只写 opacity: 0 就以为安全了。
- 必须搭配
pointer-events: none才能阻止点击/悬停；否则用户点“空白处”可能意外触发回调 - 必须加
tabindex="-1"（或移除tabindex）才能防止键盘焦点落入；否则 tab 键会停在透明按钮上，造成“迷路” - 屏幕阅读器仍可能朗读内容，需额外加
aria-hidden="true"才算语义完整 - 性能友好：只触发 repaint，不触发 reflow，适合高频动画（如轮播图切换旧图）
hidden 属性和绝对定位移出视口是特殊场景补充
hidden 是 HTML5 原生布尔属性，等价于 display: none，但语义更强、免 CSS 冲突；position: absolute; left: -9999px 则用于需要 DOM 存在、又不想影响布局的边缘情况（如 SEO 文字、辅助技术提示）。
-
el.hidden = true比el.style.display = "none"更轻量，不触发布局计算 -
hidden可被 CSS 覆盖：[hidden] { display: block; }会直接废掉它，注意样式优先级 - 绝对定位移出视口的元素仍可被
focus()、仍参与表单提交，iOS Safari 旧版可能异常弹出键盘，慎用于<input> - 真正要“视觉隐藏 + 表单有效 + 辅助技术忽略”，没有银弹——得组合
position: absolute+aria-hidden="true"+tabindex="-1"
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
