opacity、display、visiblity

opacity: 0, display: none, visiblity: hidden 的优劣和使用场景

  1. 结构：浏览器不会渲染none的结构，不会占据空间，其他都会渲染只是不可见

  2. 性能：none会引起reflow，性能差，hidden只会造成repaint，性能消耗少，opacity会造成repainit，提升为合并层，性能消耗最少

  3. 继承：none不会继承，0，会继承，子元素不管是不是none和0都消失，hidden可以继承，可以设置子元素visible来显示子元素，

  4. 事件监听：none和hidden都不能监听，0可以监听点击。

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容