显示：无；与可见性：隐藏；的区别

显示：无；与可见性：隐藏；的区别

结构：

• 显示：无
  • 元素将会完全从渲染树中消失，渲染的时候不涉及任何空间，不能点击，
• 可见性：隐藏
  • 不会让渲染树消失，渲染元素继续关注空间，只是内容不可见，不能点击
• 不透明度：0
  • 让不会元素从渲染树消失，渲染元素继续关注空间，只是内容不可见，可以点击

继承

• 显示：无和不透明度：0
  • 非属性继承，子孙节点消失是由于渲染树造成消失，通过修改子孙节点属性无法显示。
• 可见性：隐藏
  • 继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible;可以让子孙节点显式。

性能

• 显示：无
  • 修改元素会造成文档回流。读屏器不会读取显示：无元素内容，性能增加
• 可见性：隐藏
  • 修改元素只是造成本元素的重绘，性能消耗较少。读屏器读取可见性：隐藏的元素内容
• 不透明度：0
  • 修改元素会造成重绘，性能消耗极少

相同点：它们各自让元素不可见、它们都相等可以被 JS 所获取到