掌握CSS中的visibility属性，提升用户交互体验

`inherit`：元素继承其父元素的`visibility`值。

属性值详解

1. visible

当`visibility`属性设置为`visible`时，元素会正常显示，不受任何隐藏效果的影响。这是`visibility`属性的默认值，意味着在大多数情况下，你不需要显式地设置它。

2. hidden

当`visibility`属性设置为`hidden`时，元素会被隐藏，但它在页面布局中仍然占据原来的位置。这意味着，虽然用户看不到元素，但页面上的其他元素会继续保持原有的排列和间距，就像该元素仍然存在一样。

3. collapse

`collapse`值主要适用于表格元素。它会导致表格行或列被完全移除，就像它们从未存在过一样。但是，与`display: none`不同的是，`collapse`不会影响非表格布局的元素。由于`collapse`值的兼容性问题，以及它的特殊性，它在实际开发中的使用相对较少。

4. inherit

`inherit`值允许元素继承其父元素的`visibility`属性。这意味着，如果父元素的`visibility`被设置为`hidden`，那么所有设置为`inherit`的子元素也会被隐藏。这个值在创建复杂的嵌套布局时非常有用，因为它允许你通过改变一个父元素的`visibility`来同时控制多个子元素的可见性。

与`display`和`opacity`的区别

虽然`visibility`、`display`和`opacity`都可以用来控制元素的可见性，但它们之间有着显著的区别。

`display`

`display`属性用于控制元素的显示方式。当`display`被设置为`none`时，元素会被完全移除出文档流，就像它从未存在过一样。与`visibility: hidden`不同，`display: none`不仅隐藏元素，还会移除它占据的空间，使得页面上的其他元素可以重新排列以填补空白。

`opacity`

`opacity`属性用于设置元素的透明度。当`opacity`被设置为0时，元素会完全透明，从而看起来像是被隐藏了。然而，与`visibility: hidden`不同的是，`opacity: 0`的元素仍然占据文档流中的空间，并且仍然会响应用户交互（如点击事件）。此外，由于元素是透明的，其背后的内容会透过它显示出来。

应用场景

`visibility`属性因其独特的特性，在许多应用场景中都发挥着重要作用。

1. 动态显示/隐藏内容

在创建交互式网页时，你可能需要根据用户的操作动态地显示或隐藏某些内容。在这种情况下，`visibility`属性是一个很好的选择，因为它允许你在隐藏元素时保留其在文档流中的位置，从而避免重新排列页面上的其他元素。

2. 表单验证

在表单验证过程中，你可能会想要在用户输入错误时隐藏某些提示信息，而在用户更正输入时显示这些信息。使用`visibility`属性可以轻松实现这一点，因为你可以通过JavaScript动态地改变元素的`visibility`值，而无需重新计算页面的布局。

3. 加载动画

在网页加载过程中，你可能会想要显示一个加载动画来告知用户页面正在加载。当页面加载完成后，你可以使用`visibility`属性来隐藏加载动画，同时保留其在页面上的位置，以便在需要时再次显示。

4. 打印样式

在创建打印样式时，你可能想要隐藏某些在屏幕上显示的元素（如导航栏、广告等），同时保留其他内容。使用`visibility: