【进阶】用 CSS 隐藏页面上元素的方式

问题：用 CSS 隐藏页面上元素的方式

回答：

1、opacity: 0;
2、visibility: hidden;
3、display: none;
4、设置层叠关系 z-index 把元素叠在最底下使其“隐藏”;
5、设置 fixed/absolute,并设置足够大负距离的 left top 使其“隐藏”或设置 transform: scale(0);
5、设置 text-indent:-9999px 使其文字隐藏。

扩展：opacity: 0、visibility: hidden、display: none 优劣和适用场景优势。

都能设置元素的是否可见。

1) display: none

DOM 结构：浏览器不会渲染 display:none 的元素，不占据空间；
事件：不能点击；
性能：动态改变此属性时会引起重排，性能较差；
继承：非继承属性，子类也不会被渲染；

2) visibility: hidden

DOM 结构：元素被隐藏，但是会被渲染不会消失，占据空间；
事件：不能点击；
性能：动态改变此属性时会引起重绘，性能较高；
继承：继承属性，子元素可以通过设置 visibility: visible 来取消隐藏；

3) opacity: 0

DOM 结构：opacity: 0 元素隐藏，占据空间；
事件：可以点击；
性能：提升为合成层，不会触发重绘重排，性能较高；
继承：继承属性,且子元素并不能通过 opacity: 1 来取消隐藏；

---

• Previous Post →
• ← Next Post