css元素的显示和隐藏

在CSS中，可以使用display属性或visibility属性来控制元素的显示和隐藏。

1. 使用display属性：

   • display: none; 可以隐藏元素，并且元素不会占据任何空间。
   • display: block; 可以显示元素，通常用于将元素转换为块级元素。
   • display: inline; 可以显示元素，通常用于将元素转换为行内元素。
   • display: flex; 可以显示元素，并使用弹性盒模型布局。

2. 使用visibility属性：

   • visibility: hidden; 可以隐藏元素，但元素仍然占据空间。
   • visibility: visible; 可以显示元素。

示例代码：

/* 隐藏元素 */
.hide-display {
  display: none;
}
 
.hide-visibility {
  visibility: hidden;
}
 
/* 显示元素 */
.show-display {
  display: block; /* 或者 inline, flex 等 */
}
 
.show-visibility {
  visibility: visible;
}

在HTML中使用这些类：

<!-- 使用display属性隐藏 -->
<div class="hide-display">这个元素被隐藏了</div>
<div class="show-display">这个元素被显示了</div>
 
<!-- 使用visibility属性隐藏 -->
<div class="hide-visibility">这个元素被隐藏了，但仍占据空间</div>
<div class="show-visibility">这个元素被显示了</div>

使用display: none;时，元素不仅被隐藏，而且在文档流中不再占据空间。使用visibility: hidden;时，元素仍然存在于文档流中，但是被设置为不可见状态。根据需求选择合适的属性来显示或隐藏元素。