display:none与visibility：hidden的区别

要想知道两者的区别，就要知道他们代表的是什么意思，

其实两者都是对内容进行隐藏的的声明；两者都会在页面中消失，都不可被选中，但display：none是不会占用时间尺寸的，而visibility：hidden在页面这是会占用尺寸的。

 

可以实现对内容进行隐藏的CSS声明：

1、display：none 不生成盒子，盒子都不生成了，该区域的内容自然就不会显现出来了。

2、visibility：hidden：对元素内容进行隐藏，只是视觉上看不到了 ，实际上还是存在的。

3、opacity：0 ：该元素透明度为0,也只是视觉上看不到了，实际还占用尺寸，当前元素与其后代元素都会被隐藏。

4、rgba（0,0,0,0）：，当前元素透明度为0，与opacity：0一样，只是rgba的后代元素不会被隐藏。

5、overflow：hidden：对溢出当前元素区域的内容进行隐藏，并且该元素必须要有高度，并且内容已经超出元素的高度显示了才会进行隐藏。