前端面试题：隐藏元素的方法有哪些？(全)

一、display:none（常用）

        设置元素不可见并且连盒模型也不生成，一般用于不占空间的隐藏元素。display属性规定元素应该生成的框的类型，当其值为“none”时可以规定元素不生成框，隐藏该元素，可以理解成在页面中把该元素删除掉一样。

二、 visibility: hidden（常用）

        在css中visibility属性规定元素是否可见，其中visible为元素可见，hidden为元素不可见，且不占据位置。所有主流浏览器都支持visibility属性，但是，任何的版本的Internet Explorer【包括 IE8】都不支持。

三、 opacity: 0

        属性表示元素的透明度，而将元素的透明度设置为0后，元素也是隐藏的。 但是依旧存在页面中，占据位置。它也同样影响用户交互 。

四、 overflow:hidden

        overflow翻译成中文是漫出、溢出的意思；将overflow的属性设置hidden可以实现元素隐藏，但是这个是超出盒子的部分隐藏，有局限性。

五、移出视口

        利用定位将元素的top和left值设为足够大的负数，使它移出屏幕在屏幕上看不见。 如用left: -9999px或者transform: translateX(-9999px);将元素移出视口外部。

六、z-index

        在css中可以通过将元素的 z-index 属性设置为负值，以实现元素的隐藏。这实际上就是将元素放在了我们看不到的层。 如：z-index:-1

七、缩小尺寸

        在css中， 可以通过使用width、height、padding、border-width 或 font-size 来缩小元素的尺寸以实现元素的隐藏。可能还需要应用 overflow: hidden; 来确保内容不会溢出。 如：height:0; padding:0; overflow:hidden

八.覆盖另一个元素(代码太多，不推荐)

        在css中， 通过在元素的上面放置与背景颜色相同的元素，可以在视觉上隐藏一个元素。使用::after伪元素来实现：

div::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
}

九、颜色透明度

        在css中， 可以将元素的color、background-color 和 border-color 等属性设置为rgba(0,0,0,0)，这样就会使元素完全透明

十、 clip-path

        在css中， clip-path 属性可以创建一个剪辑区域，用于确定元素的哪些部分是可见的。使用 clip-path: circle(0) 可以将元素进行隐藏。 如：div{clip-path:circle(0)}