CSS 隐藏元素的方法你能说出来几种？
这是一个在初级 web 前端面试中可能常会提及的问题，聊这个话题不仅仅只是讨论“茴”字有几种写法，更是能从一个简单的问题中体现出你的 CSS 边界能力，本文提炼了十种最实用的方法，希望对你有所帮助。
常规方法
display: none;
结构消失，会触发回流重绘（Reflow & Repaint）。
opacity: 0;
结构保留，占据空间，可以正常触发事件，因触发硬件加速所以不发生回流和重绘。
visibility: hidden;
结构保留，占据空间，仅触发重绘，不会触发事件（无法选中）。
content-visibility: hidden;
设置元素内容可见性，设置的元素本身不受影响。hidden 隐藏效果与 display: none 类似，但实际浏览器只是跳过了内容的渲染，还保留着内容的渲染状态，性能上有优势。
注意：该属性目前还处于实验性阶段，使用时需要考虑浏览器兼容性问题。
逃逸视窗
position + left/top
利用绝对定位 position 设置 absolute 或 fixed，同时 left 或 top 设置 -9999px；
超大负边距会将元素抛出视图，因为定位本身脱离了文档流所以不占据空间。
translate(-9999px)
利用偏移抛出视图，空间会占据，不过元素实际不在视窗内所以无法交互。
transform: translate(-9999px);
注意：此方法对行内元素无效！
这两种方法并不使元素本身消失，只是看不见了而已。
移行变换
scale(0) / skew(90deg)
通过2D变换来达到隐藏，占据空间，不可交互。
transform: scale(0);
transform: skew(90deg);
注意：此方法对行内元素无效！
circle(0px)
利用裁剪创建元素的可显示区域，区域外会隐藏，占据空间，不可交互（这里我用 circle 是因为它参数最少）
clip-path: circle(0px);
z-index
层叠上下文在合适的情况下可以遮挡住元素，也算是一种隐藏方式。
压缩空间
height: 0; width: 0;
宽高都为 0 时不占据空间，不可交互。需要处理边距等样式，还需设置 overflow: hidden; 否则子元素可能不会隐藏，注意还会被display影响，所以这个方法本身并不实用，但是可以充分体现对盒模型的理解。
width: 0;
height: 0;
padding: 0;
margin: 0;
border: none;
overflow: hidden;
总结
或许还有其它“障眼法”可以让元素不可见，以上整理的十种方法都独具代表性，且比较实用。
以上就是文章的全部内容，感谢看到这里！本人知识水平有限，如有错误望不吝指正，如果觉得写得不错，对你有所帮助或启发，可以点赞收藏支持一下，也欢迎关注，我会更新更多实用的前端知识与技巧。我是茶无味de一天(公众号: 品味前端)，希望与你共同成长~
本文正在参加「金石计划」
