很多时候我们都会接触到这两个属性（display，visibility）,特别是当我们想要隐藏一个元素或者显示一个函数的话，我们就会使用到上面提及到的属性。那当我们用来使用这两个属性来隐藏的时候，他们都能达到隐藏的效果，但是他们之间有什么不同呢？
首先，如果我们要实现隐藏的目的的话，display属性应该设置为none:意思是没有该属性。visibility属性应该设置为hidden。我们先来看一段代码。
<style>
.p1{
visibility:hidden;
}
</style>
</head>
<body>
<p class="p1">隐藏第一个</p>
<p class="p2">隐藏第二个</p>
</body>
这个是当我们隐藏第一个元素的时候的效果：
这就说明了，当我们要隐藏第一个元素的时候，它之前所占的空间还是会占有的。其他的元素是不会随着它的隐藏而发生变化的。
当我们使用的是display的时候，
<style>
.p1{
display:none;
}
</style>
</head>
<body>
<p class="p1">隐藏第一个</p>
<p class="p2">隐藏第二个</p>
</body>
就会发现有图下的效果。
很明显可以看出他们之间的变化。display:none，当它隐藏的时候，原本属于第一个元素的空间大小被第二个元素所占用了。