display: none；和 visibility：hidden；有什么区别

一、它们的相同点：

都可以隐藏一个元素。

 

二、不同点：

display：none；不会占用文档流位置；

visibility：hidden；占用文档流位置；

 

三、性能：

从性能上来说，display：none；会更加消耗性能，因为当你从none和其它状态来回切换的时候，实际上是需要引擎去解析，然后还会影响到文档流的排列，这样会导致页面回流。

而visibility则不存在这样的情况，因为无论是哪一个状态下，它始终没有在文档流中占有位置。也可以理解为当它在hidden请状态下透明度为0；在visible的状态下透明度为1；

 

visibility的页面效果：

 

display: none;的页面效果：