display: none； 与 visibility: hidden；有什么区别?

在结构方面,display: none会使元素完全从渲染树中消失，不占据任何空间，且无法点击。而visibility: hidden则不会使元素从渲染树中消失，元素继续占据空间，只是其内容不可见，也无法点击。opacity: 0同样不会使元素从渲染树中消失，元素仍占据空间，内容不可见，但是可以点击。

在继承方面，display: none和opacity: 0是非继承属性，子孙节点的消失是由于元素从渲染树中消失造成的，通过修改子孙节点的属性无法使其显示。而visibility: hidden是继承属性，子孙节点的消失是由于继承了hidden，通过设置visibility: visible可以使子孙节点显示。

在性能方面，display: none的修改会导致文档回流，读屏器不会读取display: none元素的内容，性能消耗较大。visibility: hidden的修改只会导致元素本身的重绘，性能消耗较小，读屏器会读取visibility: hidden元素的内容。opacity: 0的修改会导致重绘，性能消耗较小。

他们的共同点是：他们都能使元素不可见，且他们都可以被JS获取到。