CSS 可见性 - CSS

CSS 可见性属性可以用于隐藏或显示 HTML 元素。这可以非常有用，尤其是在响应性设计方面。

visibility 属性

visibility 属性可以有以下几种取值：

• visible：元素可见（默认值）。
• hidden：元素不可见，但仍占用空间，即原来的位置仍存在，只是看不见了。
• collapse：仅适用于表格元素，用于隐藏表格中的行或列，同时也不占用空间。

.visibility {
  visibility: hidden; /* 元素不可见 */
}

display 属性

display 属性也可以用于隐藏元素，并且还能控制元素占据的空间。

• none：元素不可见，也不占用空间。
• block：元素以块级格式显示。
• inline：元素以行内格式显示。
• inline-block：元素以行内块格式显示。
• flex：元素以弹性盒格式显示。
• grid：元素以网格格式显示。

.display {
  display: none; /* 元素不可见，不占用空间 */
}

opacity 属性

opacity 属性可以用于设置元素的不透明度。

取值范围从 0（完全透明）到 1（完全不透明）。

.opacity {
  opacity: 0.5; /* 元素半透明 */
}

总结

以上是 CSS 可见性属性的一些基本用法。在实际开发中，我们可以根据需求，灵活运用这些属性来控制元素的可见性和占用空间，从而实现更好的响应性设计。