display:none 和 visible:hidden 的区别

display:none和visible:hidden两者的作用都是把网页上某个元素隐藏起来。

看不见摸不着（消失）
display:none 将元素隐藏并不显示，同时也不为其保留物理空间，也就是说，HTML元素(对象)的宽高等各种属性会“丢失”。

看不见摸得着（隐身）
visible:hidden 将元素隐藏，HTML元素（对象）仅在视觉上看不见，但它会保留宽高等属性，也就是说会保留原来的物理空间。

未隐藏：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>举例说明</title>
    <style>
      .box{
        width: 50%;
        border: 1px solid #6ac5ac;
        float: left;
        margin-bottom: 10px;
        padding: 5px;
      }
      .hide, .show{
        width: 20%;
        background: #d64078;
        border: 1px solid #000;
        float: left;
      }
      /*
      .dis{
        display: none;
      }
      .vis{
        visibility: hidden;
      }
      */

      code{
        background-color: #f6f6f6;
        color: #c7254e;
        padding: 2px 4px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h3><code>display:none</code></h3>
      <div class="hide dis">隐藏块</div>
      <div class="show">显示块</div>
    </div>
    <div class="box">
      <h3><code>visibility:hidden</code></h3>
      <div class="hide vis">隐藏块</div>
      <div class="show">显示块</div>
    </div>
  </body>
</html>

未隐藏效果图：

未隐藏效果图

已隐藏：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>举例说明</title>
    <style>
      .box{
        width: 50%;
        border: 1px solid #6ac5ac;
        float: left;
        margin-bottom: 10px;
        padding: 5px;
      }
      .hide, .show{
        width: 20%;
        background: #d64078;
        border: 1px solid #000;
        float: left;
      }

      .dis{
        display: none;
      }
      .vis{
        visibility: hidden;
      }


      code{
        background-color: #f6f6f6;
        color: #c7254e;
        padding: 2px 4px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h3><code>display:none</code></h3>
      <div class="hide dis">隐藏块</div>
      <div class="show">显示块(我在隐藏块的位置)</div>
    </div>
    <div class="box">
      <h3><code>visibility:hidden</code></h3>
      <div class="hide vis">隐藏块</div>
      <div class="show">显示块（我没动过）</div>
    </div>
  </body>
</html>

已隐藏效果图：

隐藏效果图

最后编辑于：2019.02.19 13:38:23