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

zengni 2020-06-12

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

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

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

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

//元素显示:display: block;

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

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

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

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

//元素显示:visibility: visible;

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

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

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

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

//元素显示:opacity: 1;

相关推荐