CSS-可见性

CSS-可见性是指控制HTML元素的显示和隐藏。在Web开发中，经常需要根据条件动态地显示或隐藏某些元素，这时使用CSS-可见性就非常有用。

CSS-属性

以下是常用的CSS-可见性属性和对应的取值：

visibility

控制元素的可见性，取值为：

• visible：元素可见
• hidden：元素隐藏，但占据原来的位置
• collapse：对于表格相关元素（如表格行、表格列等），与hidden相同，对于其他元素，同样可见但是不占据位置。

display

控制元素的显示方式，取值为：

• block：元素以块级方式显示
• inline：元素以行内方式显示
• inline-block：元素以行内块级方式显示
• none：元素不显示，且不占据位置
• flex：元素以弹性布局方式显示

opacity

控制元素的不透明度，取值为0-1之间的数字。0代表完全透明，1代表完全不透明。

代码示例

/* 将元素隐藏并且不占据位置 */
.element {
  visibility: hidden;
}
/* 将元素隐藏且不占据位置 */
.element {
  display: none;
}
/* 设置元素不透明度为50% */
.element {
  opacity: 0.5;
}

注意事项

• visibility属性影响元素的显示和隐藏，但并不影响元素占据的空间。
• display属性不仅影响元素的显示和隐藏，还会影响元素在文档流中占据的位置。
• opacity属性改变元素透明度，但不影响元素占据的位置。