设置一个块元素和样式
.box1{
width: 100px;
height: 100px;
background-color: red;
}
<body>
<div class="box1">
</div>
1
</body>
页面如图
1.给块元素添加display属性
.box1{
width: 100px;
height: 100px;
background-color: red;
display: none;
}
页面如下图:
2.给块元素添加visibility属性
.box1{
width: 100px;
height: 100px;
background-color: red;
visibility: hidden;
}
页面如下图
由以上可以看到,二者最大的区别在于使用visibility:hidden时虽然元素不会在页面中显示,但是它的位置会依然保存下来,而 display: none;会使元素的位置也不存在。