关于display:none、visibility:hidden的简单认识

今天在一个需求中，用到了opacity:0，来“隐藏”内容，并且知道了会产生所谓的“株连性”，即父元素如果用了某个样式，其所有的子元素无论怎么修改，都只能按照父元素的样式走。例如这里的opacity以及题目中display。

但是我又需要父元素在隐藏的情况下，能看到某个子元素，这样才能进行我的业务操作的时候，显然opacity和display并不能满足我的需求，于是就通过强大的搜索引擎，发现display和visibility竟然还有很多的不同，其中一个就是株连性。

这里的话我简单介绍一下，感兴趣可以自行搜索资料实验。

display因为株连性，所以在父元素是display:none的情况下，无论子元素怎么改变display，都无法显示；display:none是不会占用空间的；display会产生reflow(回流)和repaint(重绘)，这个会一定程度上影响前端的性能。

visibility不会有株连性问题，父元素是visibility:hidden，子元素可以通过visibility:visible显示；visibility会占用空间；visibility不会产生回流。

当然前面这些结论我并没有做过实验，只是看过很多up的实验得出的，这里只是简单的mark，作为以后业余时间实验的对象之一。