visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，
display:none属性会使这个对象彻底消失不显示，也不再占用位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=div, initial-scale=1.0">
<title>Document</title>
<style>
div{
float: left;}
.box1{
width: 200px;
height: 200px;
background: #c55e5e;
visibility: hidden;/* 设置visibility:hidden;该盒子消失，但是位置仍然保留（页面中也要占他本身大小的位置,） */
}
.box2{
width: 200px;
height: 200px;
background: #5e71c5;
}
.box3{
width: 200px;
height: 200px;
background: #5faa59;
display: none;/* 设置display:none; 观察到该盒子消失，而且不占位置，*/
}
.box4{
width: 200px;
height: 200px;
background: #abb155;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>
显示效果：
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。