visibility:hidden 和 display:none 有什么区别?
在 CSS 中，"visibility"和"display"属性用于显示和隐藏 HTML 元素。它们可以有不同的值，我们将在下文中学习。
在本教程中，我们将了解 CSS 属性"visibility:hidden"和"display:none"之间的区别。
什么是 CSS 属性"visibility"?
在 CSS 中，"visibility"属性用于控制 HTML 元素的可见性。通常，它可以有两个值:一个是"hidden"，另一个是"visible"。
当我们将"visibility"的值设置为"visible"时，它会在网页上显示 HTML 元素;当我们将 HTML 元素的值设置为"hidden"时，它会隐藏 HTML 元素，但会占用网页上的空间。这意味着它不会从网页中删除 HTML 元素，而是隐藏 HTML 元素。
语法
用户可以按照以下语法使用 CSS 的"visibility"属性。
visibility: visible | hidden
在上述语法中，"visibility"CSS 属性可采用"visible"或"hidden"值。
示例
在下面的示例中，我们有一个包含三个子 div 元素的"container"元素。我们为第一个和第三个 div 元素设置了"visibility: visible"。此外，我们还为第二个 div 元素设置了"visibility: hidden"。
在输出中，用户可以观察到第二个 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>Using the <i> visibility: hidden </i> CSS property to hide the HTML element</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>Using the <i> visibility: hidden and opacity: 0 </i> CSS properties</h2>
<p> Click the below cards to see the result </p>
<div class = "card">
<div class = "part1" onclick = "setOpacity0()"> Opacity : 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>
什么是 CSS Display 属性?
CSS 属性"display"用于控制 HTML 元素的显示。display 属性可以采用"block"、"inline"、"flex"、"none"等值。
当我们使用"none"作为 CSS Display 属性的值时，它会从网页中移除 HTML 元素。
语法
用户可以按照以下语法在 CSS 中使用 display: none。
display: none
示例
在下面的示例中，我们有三个 div 元素，例如第一个。我们为第一个和第三个 div 元素设置了"display: bloc"，为第二个 div 元素设置了"display: none"。用户可以观察到输出从网页中删除了第二个 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>Using the <i> display: none </i> CSS property to remove the HTML element</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元素在网页上的可见性。"visibility: hidden"会在网页中隐藏HTML元素，但不会移除元素，而是占用网页空间。而"display: hidden"CSS属性则会从网页中移除HTML元素，并且不会占用网页空间。
示例
在下面的示例中，我们有"display"和"visible"两个div元素。每当用户点击"display"div元素时，它会为该div元素设置"display: none"，同时另一个div移动到中心，用户可以在输出中观察到这一点。
每当用户点击"visible"div元素时，它会为该div元素设置"visibility: hidden"，而"display"div不会移动，这表示带有"visibility: hidden"的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>Using the <i> display: none and visibility: hidden </i> CSS properties to check difference between them</h2>
<div class = "container">
<div id = "display"> Click to set display: none </div>
<div id = "visible"> Click to set visibility: hidden </div>
</div>
<br> <br>
<button id="reset"> Reset </button>
<script>
let visible = document.getElementById("visible");
let display = document.getElementById("display");
let reset = document.getElementById("reset");
// Add event listeners to the buttons
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"则不然。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
