这两个属性看起来都是让元素隐藏，有什么区别呢？
从文档角度而言，display:none表示把该元素从文档中删除，当作其不存在，自然“隐藏”了，实际上是删除了
visibility: hidden意思是元素本来在文档哪里就放在哪里，浏览器一样去渲染，但是视觉上不表现出来
这样我们就知道两个的浏览器层面的区别了，前者根本不渲染，后者还会渲染，只不过不可见。也就是说前者不占据空间，后者虽然不可见，但仍然占据空间
而opacity：0更好理解，从字面上来说就是把元素变成透明的，但是元素还在那里，依然是可以触摸的（鼠标可点），而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>
网友评论