极客笔记CSS “visibility:hidden”和“display:none”之间有什么区别
在CSS中，“visibility”和“display”属性用于显示和隐藏HTML元素。它们可以具有不同的值，下面我们将了解相关知识。
在本教程中，我们将看到“visibility:hidden”和“display:none”这两个CSS属性之间的区别。
什么是Visibility CSS属性
在CSS中，“visibility”属性用于控制HTML元素的可见性。一般来说，它可以有两个值，一个是“hidden”，另一个是“visible”。
当我们将“visibility”的值设置为“visible”时，它会在网页上显示HTML元素；当我们将HTML元素的值设置为“hidden”时，它会隐藏HTML元素，但在网页上会占用空间。也就是说，它不会从网页中移除HTML元素，只是隐藏了该元素。
语法
用户可以按照下面的语法来使用CSS的“visibility”属性。
visibility: visible | hidden
在上面的语法中，’visibility’ CSS属性可以接受’value’参数的值为 ‘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元素包含两个部分。当用户点击第一个部分时，它的透明度变为0。当用户点击第二个部分时，它的可见性变为‘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>
什么是 Display CSS 属性
‘display’ CSS 属性用于控制 HTML 元素的显示方式。display 属性可以取 ‘block’、’inline’、’flex’、’none’ 等值。
当我们将 display CSS 属性的值设为 ‘none’ 时，它会从网页中移除 HTML 元素。
语法
用户可以按照下面的语法使用 display: none 来控制 CSS。
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: none’ CSS 属性会将 HTML 元素从网页中移除，并且不占用页面空间。
示例
在下面的示例中，我们有一个 ‘display’ 和一个 ‘visible’ 的 div 元素。当用户点击 ‘display’ div 元素时，它将设置 ‘display: none’ 属性，另一个 div 将会在中心位置移动，用户可以在输出中观察到这一点。
当用户点击 ‘visible’ 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”的元素则不是。