如何用css设置元素隐藏与显示display none block

通过CSS的display属性控制元素显隐，设置none可彻底隐藏元素且不占空间，设为block可重新显示块级元素，结合JavaScript能动态切换状态，实现交互式显示效果。

要控制网页元素的隐藏与显示，最常用的方法是通过CSS的 display 属性来设置 none 或 block。这种方式能完全从布局中移除元素或将其恢复显示。

1. 使用 display: none 隐藏元素

将元素的 display 设置为 none，元素不会在页面上占据任何空间，相当于彻底“消失”。

div {
  display: none;
}

这样，所有 div 元素将不可见，也不影响页面其他元素的布局。

2. 使用 display: block 显示元素

原来被隐藏的元素，可以通过设置 display: block 重新显示出来。block 是块级元素的常见显示方式，它会独占一行并按块布局。

立即学习“前端免费学习笔记（深入）”；

Block Survey

BlockSurvey是一个保护隐私和数据安全调查工具，可以让你使用AI来创建调查表单。

28

查看详情

.show {
  display: block;
}

给需要显示的元素添加 show 类，即可让它重新出现在页面中。

3. 结合 JavaScript 动态切换

实际开发中，通常结合 JavaScript 来动态控制元素的显示状态。

<div id="content">这是一段内容</div>
<button onclick="toggle()">切换显示</button>

function toggle() {
  const el = document.getElementById('content');
  if (el.style.display === 'none') {
    el.style.display = 'block';
  } else {
    el.style.display = 'none';
  }
}

点击按钮时，元素会在隐藏和显示之间切换。

4. 注意事项

• display: none 会让元素完全从渲染树中移除，不占空间
• 如果元素原本是内联元素（如 span），恢复显示时可使用 display: inline；若是块级元素，则用 block
• visibility: hidden 虽然也能隐藏，但元素仍占空间，与 display: none 不同

基本上就这些。掌握 display 的切换，就能灵活控制页面元素的显隐效果。

以上就是如何用css设置元素隐藏与显示display none block的详细内容，更多请关注php中文网其它相关文章！