display、visibility、opacity的区别

我们常设置display：none、visibility：hidden、opacity：0来隐藏元素，但是在实际使用中会有问题

（1）元素隐藏时是否在DOM中存在？

• display：不占据空间，会导致回流产生
• visibility：占据空间，不会导致回流
• opacity：占据空间，仅视觉上透明度为0

（2）隐藏元素绑定事件是否有效？

• display、visibility绑定事件无效
• opacity绑定事件有效

（3）该属性是否会被子元素继承？

• display不会被子元素继承，给子元素设置block无效
• visibility会被子元素继承，子元素设置visible有效
• opacity会被子元素继承，子元素设置1无效