- 一、visibility 拥有继承性
- 二、visibility 不会影响 css 计数器
- 三、visibility 过渡效果有效，而 display 则无效
- 四、visibility 可以获得元素的尺寸位置，而 display 则无法获取
- 五、 visibility 在无障碍访问这一块比 display 更友好
- 结语
以上是一个很常见的 hover 悬浮显示列表效果，而且有多个触发点相邻，对于这种 hover 交互，如果在显示的时候增加一定的延时，可以避免不经意触碰导致覆盖目标元素的问题。如果没有增加延时效果，则会存在如下情况：我本来想去 hover 第二行的“操作”文字，但是由于鼠标光标移动路径不小心经过了第一行的“操作”，结果把第二行本来 hover 的“操作”覆盖了，必须重新移出去，避开干扰元素，重新 hover 才行。如此一来，对用户体验就不好了。而恰好 visibility 就可以处理这个问题。
四、visibility 可以获得元素的尺寸位置，而 display 则无法获取
在实际开发中，我们会遇到这样的场景：我们需要对隐藏元素进行尺寸和位置的获取，以便对交互布局进行精准定位。这时候如果使用 display:none 来隐藏元素，我们获取到元素的尺寸位置则是 0，但是 visibility 则不会。js 代码如下:
console.log('clientWidth: ' + element.clientWidth);
console.log('clientHeight: ' + element.clientHeight);
console.log('clientLeft: ' + element.clientLeft);
console.log('clientTop: ' + element.clientTop);
console.dir(element.getBoundingClientRect());
因此面对以上的场景，我们更应该选择 visibility 来隐藏元素。
五、 visibility 在无障碍访问这一块比 display 更友好
视觉障碍用户对页面的状态变化都是通过声音而非视觉感知的，因此有必要告知其准确信息。
结语
以上就是关于隐藏元素 display:none 与 visibility:hidden 的区别对比，通过本文，我们了解到了 visibility 与 display 的详细区别，而且在面试的时候我们也不会只回答的片面了，知晓以上的区别能给我们的面试加分。