Skip to main content

display与visibility与opacity的区别

相同点​

visibility 和 display 都能实现元素的显示和隐藏

  • display: none; 隐藏元素

  • display: block; 显示元素

  • visibility:hidden; 隐藏元素

  • visibility:visible;显示元素

opacity: 0 是视觉上消失了，透明度为 0，在文档流中站位，浏览器会解析

区别​

css 让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为 display: none 或者 visibility: hidden。 区别：

  • display:none 是彻底消失，不在文档流中占位，浏览器也不会解析该元素(看不见摸不着)； visibility:hidden 是视觉上消失了，可以理解为透明度为 0 的效果，在文档流中占位，浏览器会解析该元素（看不到摸不着）； opacity:0 是看不见摸得着
  • 使用 visibility:hidden 比 display:none 性能上要好，display:none 切换显示时，页面产生回流和重绘（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而 visibility 切换是否显示时则不会引起回流，引起重绘。
  • visibility 具有继承性，给父元素设置 visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置 visibility: visible,则子元素又会显示出来。
  • visibility: hidden 不会影响计数器的计数，visibility: hidden 虽然让一个元素不见了，但是其计数器仍在运行。
  • CSS3 的 transition 支持 visibility 属性，但是并不支持 display，由于 transition 可以延迟执行，因此可以配合 visibility 使用纯 css 实现 hover 延时显示效果，提高用户体验。

鼠标可穿透性对比​

  • display :可穿透
  • visibility:可穿透
  • opacity:不可穿透

链接​