CSS display: none 和 visibility: hidden 的对比实例

CSS display: nonevisibility: hidden1 个文件更新于 2026-04-06

html共 7 行

<div class="demo-container">
  <button class="btn" onclick="toggleDisplay()">切换 display: none</button>
  <button class="btn" onclick="toggleVisibility()">切换 visibility: hidden</button>
  <div id="display-demo" class="demo-item">display: none 示例</div>
  <div id="visibility-demo" class="demo-item">visibility: hidden 示例</div>
</div>

登录后可以查看完整源码、在线编辑并实时预览运行效果。