css中display:none和visibility:hidden的区别
发布时间：01/15 来源： 浏览：
关键词：
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 的第一区域，在当前 HTML 中已经没有占用文档流了
使用 visibility: hidden 的第三区域，依然占用了文档流
结果示图
