這兩個屬性看起來都是讓元素隱藏掏婶，有什么區(qū)別呢？
從文檔角度而言潭陪，display:none表示把該元素從文檔中刪除雄妥，當(dāng)作其不存在，自然“隱藏”了依溯，實際上是刪除了
visibility: hidden意思是元素本來在文檔哪里就放在哪里老厌，瀏覽器一樣去渲染，但是視覺上不表現(xiàn)出來
這樣我們就知道兩個的瀏覽器層面的區(qū)別了黎炉，前者根本不渲染枝秤，后者還會渲染，只不過不可見慷嗜。也就是說前者不占據(jù)空間淀弹，后者雖然不可見，但仍然占據(jù)空間
而opacity：0更好理解洪添，從字面上來說就是把元素變成透明的垦页，但是元素還在那里，依然是可以觸摸的（鼠標(biāo)可點）干奢，而display: none和visibility: hidden則不可觸摸
測試代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
AAA<a href="#" style="display:none;">BBB</a>CCC
<br/>
AAA<span>BBB</span>CCC
<br/>
AAA<a href="#" style="visibility:hidden;">BBB</a>CCC
<br/>
AAA<a href="#" style="opacity:0;">BBB</a>CCC
<br/>
AAA<a href="#" >BBB</a>CCC
</body>
</html>
