display: none ,visibility: hidden,opacity:0的区别

display: none,visibility: hidden,opacity:0均用于隐藏元素。
三者的区别：

  • display：none让元素消失，脱离文档流
  • visibility: hidden让元素隐藏，还在文档流中，占用空间，相当于透明化了
  • opacity:0透明度为0，即完全透明，还在文档流中，占用空间。与visibility: hidden的区别是opacity可设置不同程度的透明度
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1赞 92
  • CSS
    display: none; 与 visibility: hidden; 的区别 联系：它们都能让元素不可见 区别...
    纹小艾阅读 5,769评论 0赞 1
  • RGBA和OPACITY的区别&DISPLAY和VISIBILITY的区别
    大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员。 今天给大家分享一下，修真...
    茶纸团阅读 3,895评论 0赞 0
  • RGBA和OPACITY的透明效果有何不同 DISPLAY:NONE和VISIBILITY：H...
    大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员。 今天给大家分享一下，修真...
    茶纸团阅读 4,068评论 0赞 0
  • 涉英網遊paro 《CH1-2》
    對於未知的事物以及領域，他總有種蠢蠢欲動、挑戰並且征服的慾望。 就像是雖然線上遊戲他從未接觸過，對他而言是個全新與...
    柳風阅读 3,276评论 0赞 0