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;
}

以上关于css隐藏元素方式有哪些？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。