Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 css中display:none和visibility:hidden的区别

css中display:none和visibility:hidden的区别

发布时间:2020-05-07   编辑:www.jquerycn.cn
jquery中文网为您提供css中display:none和visibility:hidden的区别等资源,欢迎您收藏本站,我们将为您提供最新的css中display:none和visibility:hidden的区别资源
css中display有很多参数,我们常用的隐藏display:none和visibility:hidden他们的区别在哪里呢?下面我们一起来看看吧,希望例子地各位有帮助。


区别分析

首先我们都知道,display: none 和 visibility: hidden 都可以起到隐藏元素的功能

两者的区别在于占用文档流的不同

display: none 隐藏元素同时去除元素在文档流所占的空间

visibility: hidden 隐藏元素, 但不去除元素在文档流所占的空间

区别示例

HTML Code

<span class="one">第一区域</span>
<span>第二区域</span>
<br /><br />
<span class="three">第三区域</span>
<span>第四区域</span>

CSS Code

span {
    background-color: black;
    padding: 5px;
    color: #fff;
}
.one {
    display: none;
}
.three {
    visibility: hidden;
}

display:none和visible:hidden的区别

从上图中,可以看出

使用 display: none 的第一区域,在当前 HTML 中已经没有占用文档流了

使用 visibility: hidden 的第三区域,依然占用了文档流
结果示图

您可能感兴趣的文章:
jQuery的显示和隐藏方法与css隐藏的样式对比
JQuery实现表格中相同单元格合并示例代码
CSS Display(显示) 与 Visibility(可见性)
CSS3 backface-visibility 属性
jQuery slideDown() 方法
jQuery 效果 show() 方法
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
jQuery :hidden 选择器
选择器中含有空格在使用示例及注意事项
jquery弹出关闭遮罩层实例

[关闭]