美文网首页
面试题 -- display: none 与 visibilit

面试题 -- display: none 与 visibilit

作者: 开着五菱宏光的小白 | 来源:发表于2019-04-22 12:47 被阅读0次

最表面的区别:

  • display: none 隐藏不占位,不影响布局

  • visibility: hidden 隐藏站位,影响布局

特殊区别

  • display:none 隐藏当前元素和后代元素

  • visibility:hidden
    visibility具有继承性给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来

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

相关文章

网友评论

      本文标题:面试题 -- display: none 与 visibilit

      本文链接:https://www.haomeiwen.com/subject/lzljgqtx.html