极客教程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元素则是可以操作的。