display、visibility、opacity之间的区别(分享)
屈星腾
| display: none; | visibility: hidden; | opacity: 0; | |
|---|---|---|---|
| 页面中 | 不存在 | 存在 | 存在 |
| 重绘 | 会 | 会 | 不会 |
| 重排/回流 | 会 | 不会 | 不会 |
| 自身绑定事件 | 不触发 | 不触发 | 可触发 |
| transition | 不支持 | 支持 | 支持 |
| 子元素复原 | 不能 | 能 | 不能 |
| 被遮挡元素触发事件 | 不影响 | 不影响 | 影响 |
说明：
子元素复原：父元素被隐藏，子元素设置显示的属性，子元素是可以显示的
被遮挡元素触发事件：就是隐藏之后，该元素背后的元素是否还可以正常触发事件，因为 opacity 只是变的透明，并没有真正意义上的隐藏，所以是会影响背后的元素的
类似资料：