前言

今天秋招面试，css部分遇到一个题，如标题，css隐藏元素的方法有哪些，当时说的其实不太完整，这里小小总结一下。

CSS隐藏元素的方法

1. 使用 display: none

这种方法完全从文档流中移除元素，不占据任何空间，如图

2. 使用 visibility: hidden;

这种方法隐藏元素，但元素仍然占据它在文档流中的空间，如图

.hidden-element { visibility: hidden; }

3. 使用 opacity: 0

这种方法将元素设置为完全透明，但元素仍然占据文档流中的空间，因为这里改变的仅仅是透明度，元素还是真实存在。

.hidden-element { opacity: 0; }

4. 使用定位

这种方法只是将元素移出用户的可视区域，但元素仍然存在于文档流中，并且占据空间。

.hidden-element { position: absolute; left: -9999px; }

5. 改变z-index

通过设置一个非常大的负 z-index 值，将元素移动到其他内容之下，实现隐藏。那么毫无疑问元素仍然占据文档流中的空间。

.hidden-element { position: relative; z-index: -9999; }

6. 设置宽高

将元素的高度和宽度设置为0，使其不可见，但元素仍然存在于文档流中并占据一个点（没有空间但存在）。s使用overflow: hidden; 确保子元素也被隐藏。

.hidden-element { height: 0; width: 0; overflow: hidden; }

7. 使用变形

通过缩放元素到0来隐藏它，元素仍然占据文档流中的空间。

.hidden-element { transform: scale(0); }

如果大佬们还有补充，欢迎留言指点。