本帖最后由 Amy 于 2018-12-3 15:00 编辑
【零基础学习web前端】CSS中display和visibility的区别
display(显示) 属性和 visibility(可见性)属性都可以用来隐藏某个元素。但是
display:none 隐藏对象不保留物理空间;
visibility:hidden 隐藏对象保留所占据的物理空间。
例如:
[CSS] 纯文本查看 复制代码 .box{
width: 120px;
height: 220px;
background: #c5c5c5;
}
.box1{
width:100px;
height: 100px;
background: #6283ff;
}
.box2{
width:100px;
height: 100px;
background: #62beff;
}
.hidden1{
display: none;
}
.hidden2{
visibility: hidden;
}
[HTML] 纯文本查看 复制代码 <div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
以下是给box1不添加隐藏样式、给box1添加样式hidden1、给box1添加样式hidden2,效果图:
可以看出,display:none 隐藏后的元素不占据空间,而visibility:hidden隐藏后仍占据空间。
|