display和visibility的区别是什么？

display和visibility的区别是什么？

今天大佬来看我的代码，刚开始看就指出了问题！！！
控制显示用的 display ，大佬说这样不是太好，像你这个树型渲染的时候容易出现按钮显示不完全的问题！并且页面会出现多余的渲染回流问题！

display和visibility的区别

一、占据空间

display: none ； 是彻底消失，不在文档流中占位，浏览器也不会解析该元素
display: none ； 是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
opacity: 0是视觉上消失了，透明度为0，在文档流中站位，浏览器会解析
使用visibility:hidden比display:none性能上要好，display:none切换显示时，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流，opacity页面不会产生回流。

二、子元素继承

display:none 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~
visibility:hidden 会被子元素继承，可以通过设置子元素==visibility:visible ==使子元素显示出来
==opacity: 0 ==也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示

三、事件绑定

display:none的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；
visibility:hidden 元素上绑定的事件也无法触发；
opacity: 0元素上面绑定的事件是可以触发的。

四、过渡动画

transition对于display 肯定是无效的；

transition对于visibility 也是无效的；

transition对于opacity 是有效。

扩展：
在网页做SEO时有时我们会通过把堆砌的关键词隐藏而达到作弊的目的，
但不应该使用visibility：hidden 和display：none ，
而应该把关键词颜色设为和背景色相同，或者把关键词的字号设为非常小，而令访客无法发现。

有的人则因为害怕搜索蜘蛛的的反感而为visibility：hidden 和display：none 的使用的烦恼。
其实有很多漂亮的效果是通过元素可见性的转换而实现的。

搜索引擎也理解这一做法（事实上搜索引擎往往忽略CSS），因此如果你的目的不是欺骗搜索引擎，
你大可以放心地使用visibility：hidden 和display：none 去隐藏内容。