display与visibility的区别 逃离我推掉我的手 2022-07-03 15:26 162阅读 0赞 很多时候我们都会接触到这两个属性(display,visibility),特别是当我们想要隐藏一个元素或者显示一个函数的话,我们就会使用到上面提及到的属性。那当我们用来使用这两个属性来隐藏的时候,他们都能达到隐藏的效果,但是他们之间有什么不同呢? 首先,如果我们要实现隐藏的目的的话,display属性应该设置为none:意思是没有该属性。visibility属性应该设置为hidden。我们先来看一段代码。 <style> .p1\{ visibility:hidden; \} </style> </head> <body> <p class="p1">隐藏第一个</p> <p class="p2">隐藏第二个</p> </body> 这个是当我们隐藏第一个元素的时候的效果: ![Center][] 这就说明了,当我们要隐藏第一个元素的时候,它之前所占的空间还是会占有的。其他的元素是不会随着它的隐藏而发生变化的。 当我们使用的是display的时候, <style> .p1\{ display:none; \} </style> </head> <body> <p class="p1">隐藏第一个</p> <p class="p2">隐藏第二个</p> </body> 就会发现有图下的效果。 ![Center 1][] 很明显可以看出他们之间的变化。display:none,当它隐藏的时候,原本属于第一个元素的空间大小被第二个元素所占用了。 [Center]: /images/20220618/f5cdf8e2252e4deb865e85955b7bf143.png [Center 1]: /images/20220618/09721a7060fd45efb4b0379f77a29304.png
还没有评论,来说两句吧...