最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css中display:none和visibility:hidden的区别
时间：2015-05-29 编辑：简简单单 来源：一聚教程网
区别分析
首先我们都知道，display: none 和 visibility: hidden 都可以起到隐藏元素的功能
两者的区别在于占用文档流的不同
display: none 隐藏元素同时去除元素在文档流所占的空间
visibility: hidden 隐藏元素, 但不去除元素在文档流所占的空间
区别示例
HTML Code
第一区域
第二区域
第三区域
第四区域
CSS Code
span {
background-color: black;
padding: 5px;
color: #fff;
}
.one {
display: none;
}
.three {
visibility: hidden;
}
从上图中，可以看出
使用 display: none 的第一区域，在当前 HTML 中已经没有占用文档流了
使用 visibility: hidden 的第三区域，依然占用了文档流
结果示图
相关文章
- css ie6、ie7、ie8中overflow:hidden无效解决办法 03-05
- css中Class与ID的区别 06-27
- CSS Classes 与 ID 区别 12-15
- css class与id的区别 10-21
- DIV+CSS布局入门教程(六) -- 关于ID和CLASS 01-26
- 针对class、id所做的CSS HACK 01-13