[分享]css中属性隐藏的区别

CSS 中的 visibility 属性和 display 属性都可以用来隐藏元素，但它们的隐藏方式有所不同。visibility 属性可以将元素隐藏，但是它的位置仍然占据文档流，所以即使元素不可见，...

CSS 中的 visibility 属性和 display 属性都可以用来隐藏元素，但它们的隐藏方式有所不同。
visibility 属性可以将元素隐藏，但是它的位置仍然占据文档流，所以即使元素不可见，它仍然会占据一定的空间。如果使用 visibility:hidden; 隐藏元素，元素就像变成了透明的一样：虽然它不可见，但是它的大小和位置仍然存在。
而 display 属性用来控制元素的显示方式，比如 block、inline、inline-block 等。如果使用 display:none; 隐藏元素，元素就会完全不存在，即使它的大小和位置也会被移除。被 display:none; 隐藏的元素不会占据任何空间，也不会影响其他元素的排列方式。
下面是两种属性的示例代码：

p.visibility-example {<br>
  visibility: hidden;<br>
  color: red;<br>
}<br>

p.display-example {<br>
  display: none;<br>
  color: blue;<br>
}<br> 

在这个示例中，我们使用了 visibility 属性和 display 属性来隐藏两个段落。首先，我们将 visibility 属性应用于了类名为 visibility-example 的段落，并将字体颜色设置为红色。这时候隐藏后的段落仍会占据位置，但不可见。
然后，我们将 display 属性应用于了类名为 display-example 的段落，并将字体颜色设置为蓝色。这时候隐藏后的段落不占用任何位置，完全从页面中消失了。
这两个属性的使用场合也有所不同。如果想让元素重新出现，可以通过修改 visibility 属性将元素变回可见状态，而 display 属性需要使用 JavaScript 代码来修改。
综上所述，虽然 visibility 属性和 display 属性都可以用来隐藏元素，但它们的隐藏方式有所不同。在使用时需要根据实际情况来选择合适的属性。