display: none 与 visibility: hidden 的区别
很多前端的同学认为 visibility: hidden 和 display: none 的区别仅仅在于 display: none 隐藏后的元素不占据任何空间, 而 visibility: hidden 隐藏后的元素空间依旧保留 , 实际上没那么简单, visibility 是一个非常有故事性的属性
1,visibility 具有继承性, 给父元素设置 visibility:hidden; 子元素也会继承这个属性. 但是如果重新给子元素设置 visibility: visible, 则子元素又会显示出来. 这个和 display: none 有着质的区别
2,visibility: hidden 不会影响计数器的计数, visibility: hidden 虽然让一个元素不见了, 但是其计数器仍在运行. 这和 display: none 完全不一样
3,CSS3 的 transition 支持 visibility 属性, 但是并不支持 display, 由于 transition 可以延迟执行, 因此可以配合 visibility 使用纯 CSS 实现 hover 延时显示效果. 提高用户体验.
来源: http://www.bubuko.com/infodetail-3655186.html