opacity: 0、visibility: hidden、display: none 优劣和适用场景

Question

1. display:none（不占空间，不能点击）
2. visibility:hidden（占据空间，不能点击）隐藏后不会引起页面结构发生改变，不会撑开
3. opacity:0 （占据空间，可以点击）

其中 opacity:0 和 display:none，具有株连特性，如果祖先元素设有此属性，无论子元素怎么样都不会出现在 DOM 中。

如果父节点元素为 visibility:hidden，当子元素属性为 visibility：visible 那么子元素就会显现出来。