CSS 什么是visibility:hidden和display:none的区别

在CSS中，“visibility”和“display”属性用于显示和隐藏HTML元素。它可以有不同的值，下面将介绍它们之间的差异。

在本教程中，我们将看到“visibility:hidden”和“display:none”CSS属性之间的区别。

什么是Visibility CSS属性？

在CSS中，“visibility”属性用于控制HTML元素的可见性。通常，它可以有两个值。一个是“hidden”，另一个是“visible”。

当我们将“visible”设置为“visibility”的值时，它在网页上显示HTML元素，当我们将HTML元素的值设置为“hidden”时，它会隐藏HTML元素，但它会在网页上占用空间。这意味着它不会从网页中移除HTML元素，而是隐藏它。

语法

用户可以按照下面的语法来使用CSS的“visibility”属性。

visibility: visible | hidden

在上述语法中，“visibility”CSS属性可以采用“visible”或“hidden”值。

示例

在下面的示例中，我们有一个包含三个子div元素的“container”元素。我们已将首个和第三个div元素的“visibility：visible”设置为“hidden”的第二个div元素。

在输出中，用户可以观察到第二个div元素不可见，但在网页上占用空间。

<html>
<head>
   <style>
      .container {
         height: 100px;
         width: 500px;
         background-color: blue;
         padding: 10px;
         display: flex;
         justify-content: space-around;
         border-radius: 12px;
         font-size: 1.2rem;
      }
      .first,
      .second,
      .third {
         height: 100px;
         width: 100px;
         background-color: red;
         border-radius: 12px;
         display: flex;
         justify-content: center;
         align-items: center;
         color: white;
      }
      .first, .third { visibility: visible;}
      .second {visibility: hidden;}
   </style>
</head>
<body>
   <h2>使用CSS属性<i>visibility：hidden</i>隐藏HTML元素</h2>
   <div class = "container">
      <div class = "first">visibility：visible</div>
      <div class = "second">visibility：hidden</div>
      <div class = "third">visibility：visible</div>
   </div>
</body>
</html>

示例

“opacity：0”与“visibility：hidden”几乎相似，因为它也隐藏HTML元素，但在网页上占用空间。

在下面的示例中，div元素包含两个部分。当用户单击第一部分时，其不透明度变为零。当用户单击第二部分时，其可见性变为“hidden”。两者都隐藏了HTML元素，但在网页上占用空间。

但是，主要区别在于具有“opacity：0”的元素是可交互的，因为您可以尝试多次单击它，并将多次显示输出。但是，使用“visibility：hidden”的元素是不可交互的。

<html>
<head>
   <style>
      .card {
         height: 300px;
         width: 300px;
         background-color: aqua;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
      }
      .part1,
      .part2 {
         height: 45%;
         width: 100%;
         background-color: red;
         color: white;
         font-size: 2rem;
      }
   </style>
</head>
<body>
   <h2>使用<i>visibility：hidden和opacity：0</i> CSS属性</h2>
   <p>单击下面的卡片以查看结果</p>
   <div class = "card">
      <div class = "part1" onclick = "setOpacity0()">Opactiy : 0</div>
      <div class = "part2" onclick = "setVisibility()">visibility: hidden</div>
   </div>
   <div id = "output"></div>
   <script>
      let section1 = document.querySelector('.part1');
      let section2 = document.querySelector('.part2');
      let output = document.querySelector('#output');
      function setOpacity0() {
         section1.style.opacity = 0;
         output.innerHTML += 'Opacity : 0 <br>';
      }
      function setVisibility() {
         section2.style.visibility='hidden';
         output.innerHTML += 'visibility: hidden <br>';
      }
   </script>
</body>
</html>

什么是Display CSS属性？

“display” CSS属性用于控制HTML元素的显示。显示属性可以采用“block”、“inline”、“flex”、“none”等方式。

当我们使用“none”作为显示CSS属性的值时，它会从网页中移除HTML元素。

语法

用户可以按照下面的语法在CSS中使用display：none。

display: none

示例

在下面的示例中，我们有三个div元素，就像第一个一样。我们已将“first”和“third” div元素的“display：block”设置为第二个div元素的“display：none”。

用户可以观察到输出从Web页面中删除了第二个div。

<html>
<head>
   <style>
      .container {
         height: 100px;
         width: 500px;
         background-color: red;
         padding: 10px;
         display: flex;
         border-radius: 12px;
         font-size: 1.2rem;
      }
      .first, .second, .third {
         height: 80px;
         width: 100px;
         background-color: green;
         border-radius: 12px;
         display: flex;
         color: white;
         margin: 10px;
      }
      .first, .third { display: block;}
      .second { display: none;}
   </style>
</head>
<body>
   <h2>使用CSS属性<i>display：none</i>来删除HTML元素</h2>
   <div class = "container">
      <div class = "first">display：block</div>
      <div class = "second">display：none</div>
      <div class = "third">display：block</div>
   </div>
</body>
</html>

visibility:hidden和display：none的区别

“visibility”和“display”属性都控制HTML元素在Web页面上的可见性。 “visibility：hidden”隐藏Web页面上的HTML元素，但它不会从Web页面中移除元素，而是占用空间。但是，“display：hidden” CSS属性从Web页面中删除HTML元素，并且不会占用空间。

示例

在下面的示例中，我们有“display”和“visible” div元素。无论何时用户单击“display” div元素，它都会将“display：none”设置为div元素，而其他div则移到中心，用户可以在输出中观察到。

无论何时用户单击“visible” div元素，它都会将“visibility：hidden”设置为div元素，而“display” div不会移动，表示具有“visibility：hidden”的HTML元素占用Web页面上的空间。

<html>
<head>
   <style>
      .container {
         height: 100px;
         width: 500px;
         background-color: purple;
         padding: 10px;
         display: flex;
         justify-content: center;
         align-items: center;
         border-radius: 12px;
         font-size: 1.2rem;
      }
      .display, .visible {
         height: 80px;
         width: 80px;
         color: white;
         border-radius: 12px;
         margin: 10px;
         display: flex;
         justify-content: center;
         align-items: center;
         font-size: 2rem;
      }
      .display {
         background-color: turquoise;
      }
      .visible {
         background-color: orange;
      }
   </style>
</head>
<body>
   <h2>跟踪visibility：hidden和display：none之间的差异</h2>
   <div class = "container">
      <div class = "display" onclick = "setDisplay()">display</div>
      <div class = "visible" onclick = "setVisibility()">visible</div>
   </div>
   <script>
      var display = document.querySelector('.display');
      var visible = document.querySelector('.visible');

      function setDisplay() {
         display.style.display = "none";
      }
      function setVisibility() {
         visible.style.visibility='hidden';
      }
   </script>
</body>
</html>

<html>
<head>
   <style>
      .container {
         width: 300px;
         height: 120px;
         background-color: pink;
         display: flex;
         justify-content: center;
         align-items: center;
         border-radius: 10px;
         padding: 10px;
      }
      #visible, #display {
         width: 120px;
         height: 100px;
         margin: 5px;
         background-color: lightblue;
         color: green;
         font-size: 20px;
      }
   </style>
</head>
<body>
   <h2>使用CSS属性"visibility:hidden"和"display:none"检查它们之间的不同之处</h2>
   <div class="container">
      <div id="display"> 点击设置display:none </div>
      <div id="visible"> 点击设置visibility:hidden </div>
   </div>
   <br> <br>
   <button id="reset"> 重置 </button>
   <script>
      let visible = document.getElementById("visible");
      let display = document.getElementById("display");
      let reset = document.getElementById("reset");
      // 为按钮添加事件监听器
      visible.addEventListener("click", function () {
         visible.style.visibility = "hidden";
      });
      display.addEventListener("click", function () {
         display.style.display = "none";
      });
      reset.addEventListener("click", function () {
         visible.style.visibility = "visible";
         display.style.display = "block";
      });
   </script>
</body>
</html>

本教程中使用了多个示例来介绍“visibility: hidden”和“display: none”之间的差异。但是，“visibility: hidden”和“opacity: 0”类似，但具有“opacity: 0”的HTML元素是不可操作的，而具有“visibility: hidden”的HTML元素则是可以操作的。