clip-path: inset(100%) 是最可靠的视觉隐藏方式，它裁剪为空区域、不占空间、不响应事件、兼容现代浏览器；若需兼容 IE11，应使用 absolute + 1px 尺寸 + margin -1px + overflow hidden + clip 组合。
text-indent 负值隐藏文字，只对块级内联元素有效
用 text-indent: -9999px 隐藏文字，本质是把第一行文字往左推到屏幕外，但前提是元素得能“换行”或有文本流行为。对 span、button 这类默认 display: inline 的元素，如果没设 display: block 或 inline-block，负缩进根本不起作用——它压根不参与块格式化上下文。
- 必须配合
overflow: hidden，否则文字可能从左侧溢出可见 - 仅适用于纯文字内容，图标、子元素（如
svg或img）完全不受影响 - 在高缩放比（如 200%）或某些屏幕阅读器下，仍可能被读取，可访问性差
- 不要用在
input、textarea等表单控件上——它们不支持text-indent
绝对定位 + left: -9999px 不等于隐藏，只是移走
position: absolute; left: -9999px; 并没有让元素“不可见”，它只是把它扔到视口左边极远处。元素依然占据 DOM 结构、响应事件、被屏幕阅读器聚焦，甚至可能触发滚动条出现（尤其父容器有 overflow: auto）。
- 必须加
top: 0和width: 1px; height: 1px;配合，否则宽高继承自内容，可能撑开布局 - 若父元素是
position: relative，它会在父容器内偏移，不是真“屏幕外”——要确保最近的定位祖先足够大，或直接相对于body - 和
text-indent一样，不阻止键盘焦点进入，Tab仍能选中它 - 慎用于动画过渡场景：从
left: -9999px切到left: 0会触发重排，性能不如transform
真正可靠的隐藏方式：clip-path 或 visibility + position
想彻底视觉隐藏又保留语义结构，clip-path: inset(100%) 是目前最干净的选择。它把元素裁剪成空区域，不占空间、不响应鼠标、不触发重排，且兼容性已覆盖 Chrome 55+/Firefox 54+/Safari 9.1+。
- 替代写法
clip: rect(1px, 1px, 1px, 1px)已废弃，不要用 - 如果需兼顾旧浏览器（IE），可用
position: absolute; opacity: 0; pointer-events: none;，但要注意opacity: 0仍会被读屏软件读取 - 千万别混用
display: none——它会脱离渲染树，破坏 ARIA 属性依赖或 JS 动态显示逻辑 - 对图标字体（如 Font Awesome），
font-size: 0+line-height: 0比负text-indent更稳
为什么不用 display: none？它和隐藏不是一回事
display: none 不是“隐藏”，是“删除渲染”。它会让元素彻底退出文档流，导致 JS 获取 offsetHeight 为 0、CSS 动画无法从隐藏态过渡、兄弟元素重排、甚至破坏 aria-live 区域监听。
- 常见误用：模态框关闭时设
display: none，再打开时所有 transition 都失效 - 表单校验提示文案若用
display: none控制显隐，屏幕阅读器可能跳过它，因为 DOM 节点瞬间消失/重建 - 动画入场若依赖从 “无尺寸” 到 “有尺寸”，
display: none → block必须搭配重排强制，极难控制 - 真正需要的是 “视觉不可见但结构存在”，这时候
visibility: hidden比display: none更接近目标，但它仍占位、仍响应事件
事情说清了就结束。实际项目里，clip-path: inset(100%) 是首选；若要保 IE11，就用 position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); 这套组合——别省那几行 CSS，漏掉 margin: -1px 或 overflow: hidden，就可能在某个缩放比例下露出破绽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
