隐藏本质分两种
- 代码隐藏
- 视觉隐藏
常见的三种隐藏属性的差别(显示 可见性 不透明)
- 结构
display:none从渲染树中消失，不占据空间，不能点击(无法进行 DOM 事件监听)visibility:hidden从渲染树消失，占据空间，不能点击(无法进行 DOM 事件监听)opacity:0从渲染树消失，占据空间，可以点击(可以进行 DOM 事件监听)
- 继承
display:none非继承属性，修改子孙节点属也无法显示visibility:hidden是继承属性，子孙节点设置visibility:visible可以显示出来。opacity:0非继承属性，修改子孙节点属也无法显示
- 性能
display:none引起页面重排 性能消耗大visibility:hidden只造成本元素的重绘，性能消耗较少opacity:0只造成本元素重绘，性能消耗较少
补充
三种都隐藏了元素，但是在页面的开发面板中的html元素审查中还是能看见标签依旧存在- 十种隐藏元素的方法
