CSS隐藏元素的几种方式以及display、visibility、opacity的区别

CSS隐藏元素的方式

首先最通用且最易想到的方法肯定是display、visibility和opacity这三种了

display:none

设置元素不可见并且连盒模型也不生成，一般用于不占空间的隐藏元素。

display属性规定元素应该生成的框的类型，当其值为“none”时可以规定元素不生成框，隐藏该元素，可以理解成在页面中把该元素删除掉一样。

visibility:hidden

visibility属性可以设置元素是否可见。 visible为可见，hidden为不可见，占据空间。 而如果父元素为visibility:hidden，但若将其子元素设为visibility:visible，则子元素依旧可见。

opacity:0

opacity可以设置透明度，0～1. 但是，设置透明度为0，虽然元素也看不见了，但是它确实依旧存在页面中且占据位置的，有时候会影响用户交互。

overflow:hidden

这个也可以实现元素隐藏，不过有点局限性是 只能超出盒子的部分隐藏

移出视口

利用定位直接将元素的top和left值设置的足够大的负数，就可以把它移出视口，也就是屏幕上看不见。

如： left:-9999px 或 transform:translateX(-9999px)

z-index

将元素的z-index设为负值，也可以实现隐藏效果。相当于至于了最最底层

覆盖

比如有一个正方形的盒子，但现在不需要了，可以在其上面放置一个和背景色相同的元素，这样视觉角度是隐藏了。 可以用 ::after伪元素实现

display、visibility、opacity的区别

相同之处都是能够实现元素的隐藏效果

区别：

1. 性能

visibility:hidden 比 display:none 在性能上会好一些，因为display:none在切换显示与隐藏时，页面会产生回流和重绘。 而 visibility和opacity不会产生回流

2. 是否占据空间

display 不会在文档流中占位，浏览器也不会解析该元素，相当于就没有这个元素了。

visibility依旧在文档流中占位，浏览器也会解析该元素，只是视觉上消失了。

3. 动画效果

transition对 display和visibility是无效的，对opacity是有效的

4. 事件绑定

display:none就认为它已经不存在了，所以自然是无法触发上面绑定的事件；

visibility虽然占据空间，但也无法触发

opacity是可以触发绑定事件的

5. 子元素继承

display:none 不会被子元素继承,给子元素设置display：block;子元素不会显示；

visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible ；可以让子元素显示出来；

opacity: 0 也会被子元素继承，给子元素设置opacity: 1；子元素不会显示