[HTML/CSS]display:none和visibility:hidden的区别_html/css_WEB-ITnose

html教程评论451 views阅读模式

写在前面

在群里有朋友问这样一个问题,display:none的标签,影响了布局。这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的。

一个例子

         
 
  第一个层
     
 
  第二个层
 

浏览结果

为第一个层设置样式visibility:hidden

    
 
  第一个层
     
 
  第二个层
 

  浏览结果

那么为第一个层设置display:none样式

通过上面的对比,你也会发现display:none可以让块元素隐藏并不占位置。而visibility:hidden虽然使块元素隐藏了,但仍占位置。

总结

1、display:none:元素隐藏,不占位置。

2、visibility:hidden:元素隐藏,占位置。

企鹅博客
  • 本文由 发表于 2020年10月1日 12:59:17
  • 转载请务必保留本文链接:https://www.qieseo.com/370034.html

发表评论