css隐藏元素方式有哪些？

总结分享一些 css 隐藏元素的方式：

1、如果希望元素不可见，同时不占据空间，辅助设备无法访问，同时不渲染，可以使用<script>标签隐藏。例如:

<script type="text/html">
  <img src="1.jpg" />
</script>

<script>标签是不支持嵌套的，因此，如果希望在<script>标签中再放置其他不渲染的模板内容，可以试试使用<textarea>元素。例如:

<script type="text/html">
  <img src="1.jpg" />
  <textarea style="display:none;">
    <img src="2.jpg">
  </textarea
  >
</script>

2、如果希望元素不可见，同时不占据空间，辅助设备无法访问，但资源有加载，DOM 可 访问，则可以直接使用 display:none 隐藏。例如:

.hidden {
  display: none;
}

3、如果希望元素不可见，同时不占据空间，辅助设备无法访问，但显隐的时候可以有 transition 淡入淡出效果，则可以使用:

.hidden {
  position: absolute;
  visibility: hidden;
}

4、如果希望元素不可见，不能点击，辅助设备无法访问，但占据空间保留，则可以使用 visibility:hidden 隐藏。例如:

.hidden {
  visibility: hidden;
}

5、如果希望元素不可见，不能点击，不占据空间，但键盘可访问，则可以使用 clip 剪裁隐藏。例如:

.clip {
  position: absolute;
  clip: rect(0 0 0 0);
}
.out {
  position: relative;
  left: -999em;
}

6、如果希望元素不可见，不能点击，但占据空间，且键盘可访问，则可以试试 relative 隐藏。例如，如果条件允许，也就是和层叠上下文之间存在设置了背景色的父元素，则也可以使用更友好的 z-index 负值隐藏。例如:

.lower {
  position: relative;
  z-index: -1;
}

7、如果希望元素不可见，但可以点击，而且不占据空间，则可以使用透明度。例如:

.opacity {
  position: absolute;
  opacity: 0;
  filter: Alpha(opacity=0);
}

8、如果单纯希望元素看不见，但位置保留，依然可以点可以选，则直接让透明度为 0。例如:

.opacity {
  opacity: 0;
  filter: Alpha(opacity=0);
}

9、在标签受限的情况下希望隐藏某元素文字，例如:

.hidden {
  text-indent: -120px;
}

10、如果希望显示的时候可以加一个 transition 动画，可以使用 max-height 进行隐藏。

.hidden {
  max-height: 0;
  overflow: hidden;
}