css样式中元素隐藏的三种方式以及区别
2021-02-06 21:18
标签：三种方式 strong -- dash 页面 事件 不可 isp 通过 有以下三种方式来实现元素的隐藏： ① display: none; 不占据空间，更改该属性时会引起DOM树结构变化、页面重新布局——回流。 父元素被设置后已不在标准流中存在，自然不会被子元素继承。 无占位元素，原有的元素绑定的事件监听无效。 //元素显示：display: block; ------------------------------------------------------------------------------------------------------------------------------ ② visibility: hidden; 元素隐藏、仍然占据空间。更改该属性时不会引起DOM树结构变化、不会引起页面重新布局，只会按照css代码重新渲染——重绘。 可以被子元素继承，可以通过设置visibility: visible;使得子元素显示。 元素无效、原有的元素绑定的事件监听无效。 //元素显示：visibility: visible; ------------------------------------------------------------------------------------------------------------------------------ ③ opacity: 0; 元素隐藏、占空间。更改该属性时DOM树结构没有变化、不会引起页面重新布局，只可能会重新渲染——重绘。 可以被子元素继承，不可以通过设置opacity: 1;使得子元素显示。 元素不显示、原有的元素绑定的事件监听有效。 //元素显示：opacity: 1; css样式中元素隐藏的三种方式以及区别 标签：三种方式 strong -- dash 页面 事件 不可 isp 通过 原文地址：https://www.cnblogs.com/xuwennn/p/13098804.html
文章标题：css样式中元素隐藏的三种方式以及区别
文章链接：http://soscw.com/index.php/essay/51887.html