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則元素完全顯示