css中元素的显示与隐藏，2024年最新去阿里面试hr,会问到的问题

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

1. display属性：

   • display: none;：元素不显示，并且从文档流中移除。
   • display: block;：元素作为块级元素显示。
   • display: inline;：元素作为内联元素显示。
   • display: flex;：元素使用弹性布局模型显示。

2. visibility属性：

   • visibility: hidden;：元素不可见，但仍然占据原来的空间。
   • visibility: visible;：元素可见。

示例代码：

/* 使用display属性 */
.hide-display {
  display: none; /* 元素被隐藏 */
}
 
.show-display {
  display: block; /* 或者使用 'inline'、'flex' 等，根据需要显示 */
}
 
/* 使用visibility属性 */
.hide-visibility {
  visibility: hidden; /* 元素隐藏，但仍占据空间 */
}
 
.show-visibility {
  visibility: visible; /* 元素可见 */
}

在JavaScript中，可以通过修改元素的style属性来切换这些显示状态：

// 使用display属性
document.getElementById('myElement').style.display = 'none'; // 隐藏元素
document.getElementById('myElement').style.display = 'block'; // 显示元素
 
// 使用visibility属性
document.getElementById('myElement').style.visibility = 'hidden'; // 隐藏元素但保留空间
document.getElementById('myElement').style.visibility = 'visible'; // 显示元素