display:none和visiblity:hidden的区别

发布于 2021-03-18  109 次阅读


一: 如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击,无法使用屏幕阅读器等辅助设备访问,占据的空间消失。    给元素设置visibility: hidden也可以隐藏这个元素,但是隐藏元素仍需占用与未隐藏时一样的空间,也就是说虽然元素不可见了,但是仍然会影响页面布局.

二: display:none 不会在计数器的范围内.而visiblity:hidden 虽然不会显示但还是会计数
如: <ol> <li></li> <li style="display:none></li> <li></li> 计数为2.
而:<ol> <li></li> <li style="visiblity:hidden></li> <li></li> 计数为3.

三. visibility具有继承性,给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别.

四. CSS3的transition支持visibility属性,但是并不支持display,由于transition可以延迟执行,因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

五. 回流问题: display:none 会有回流问题 ,visiblity:hidden不会有回流问题.

什么是回流


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。