css样式中元素隐藏的三种方式以及区别

有以下三种方式来实现元素的隐藏：

① display: none;  不占据空间，更改该属性时会引起DOM树结构变化、页面重新布局——回流。

父元素被设置后已不在标准流中存在，自然不会被子元素继承。

无占位元素，原有的元素绑定的事件监听无效。

//元素显示：display: block;

------------------------------------------------------------------------------------------------------------------------------

② visibility: hidden; 元素隐藏、仍然占据空间。更改该属性时不会引起DOM树结构变化、不会引起页面重新布局，只会按照css代码重新渲染——重绘。

可以被子元素继承，可以通过设置visibility: visible;使得子元素显示。

元素无效、原有的元素绑定的事件监听无效。

//元素显示：visibility: visible;

------------------------------------------------------------------------------------------------------------------------------

③ opacity: 0;   元素隐藏、占空间。更改该属性时DOM树结构没有变化、不会引起页面重新布局，只可能会重新渲染——重绘。

可以被子元素继承，不可以通过设置opacity: 1;使得子元素显示。

元素不显示、原有的元素绑定的事件监听有效。

//元素显示：opacity: 1;