display:none、visibility:hidden，opacity:0三者区别

1. display:none

• 设置display：none，让这个元素消失

• 消失不占据原本任何位置

• 连带子元素一起消失

• 元素显示：display:block

 

2. visibility:hidden

• 元素消失，只是视觉消失，在页面中实际存在，对布局依然起作用

• 元素显示：visibility:visible

 

3. opacity:0

• opacity值为0代表透明度为0

• 元素完全透明，视觉上消失，页面实际存在，依然对布局起作用

• 0-1之间代表透明度，值为1则元素完全显示