---
url: https://sugarat.top/interview/css/hideElement.md
---

# 几种隐藏元素的方式比较

* display
* opacity
* visibility

## display

> display:none

* 元素将不再占据页面空间,变为"不可见"节点
* 触发回流,进而触发重绘

## visibility

> visibility:hidden

* 直接隐藏元素,但仍占据页面空间
* 触发重绘
* 绑定的事件不能被触发

## opacity

> opacity:0

* 使元素变为透明,仍占据页面空间
* 触发重绘
* 绑定的事件仍然能被触发