📜  CSS-可见性(1)

📅  最后修改于: 2023-12-03 15:00:09.825000             🧑  作者: Mango

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属性改变元素透明度,但不影响元素占据的位置。