xinpureZhu

Menu

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 的第三区域,依然占用了文档流

— 于 共写了439个字
— 文内使用到的标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注