数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究CSS 中 display: none; 和 visibility: hidden; 的区别
在应用程序中，有时您希望隐藏某些元素（即，从 DOM 中移除它们，但将其保留在屏幕上）。您可以通过多种方法实现此目的。使用 visibility 属性和 hidden 值(visibility:hidden;) 或使用 display 属性和 none 值 (display:none;) 是两种常见的方法。
这两种方法都能使元素隐藏，但它们对元素行为的影响不同。在本文中，我们将了解 display:none; 和 visibility:hidden; 之间的区别。
CSS visibility:hidden
此 CSS 属性将导致元素占据屏幕空间，即使它从视图中隐藏。这意味着元素之前和之后的內容将被渲染，但隐藏的元素仍然占据完全相同的空间。即使它没有显示在屏幕上并占用空间，HTML 元素仍然存在于 DOM 中。
语法
以下是 CSS visibility 属性的语法：
visibility: visible| hidden | collapse | initial | inherit;
示例
让我们看下面的示例，我们将使用 CSS visibility:hidden 属性。
<!DOCTYPE html>
<html>
<head>
<style>
.tp {
display: flex;
gap: 20px;
}
.x {
height: 100px;
width: 150px;
font-size: 30px;
text-align: center;
font-family: verdana;
color: #DE3163;
}
.x1 {
background-color: #E8DAEF;
}
.x2 {
background-color: #DFFF00;
visibility: hidden;
}
.x3 {
background-color: #CCCCFF;
}
</style>
</head>
<body style="background-color:#EAFAF1">
<div class="tp">
<div class="x1 x">A</div>
<div class="x2 x">B</div>
<div class="x3 x">C</div>
</div>
</body>
</html>
当我们运行以上代码时，它将生成一个输出，该输出包含一个 div 盒子，其中一个应用了 CSS visibility 属性，并在网页上显示。
CSS display:none
但是，display: none 通过从屏幕中隐藏元素来完成类似的任务。在这种情况下，它不会留下任何空间，并且行为会给人一种带有此属性的元素不存在的印象。尽管此属性对其没有影响，但该元素仍然存在于 DOM 中。元素只是隐藏在 DOM 中。此 CSS 属性不能用于从 DOM 中移除元素。
语法
以下是 CSS display 属性的语法：
display: none | inline | block | inline-block;
示例
在下面的示例中，我们将使用 CSS display:none 属性。
<!DOCTYPE html>
<html>
<head>
<style>
.tp {
padding: 50px;
width: max-content;
display: flex;
border: 1px solid #DE3163;
}
.x {
height: 50px;
width: 130px;
}
.x1 {
background-color: #DFFF00;
margin-right: 30px;
}
.x2 {
background-color: #229954;
margin-right: 30px;
display: none;
}
.x3 {
background-color: #212F3D;
}
</style>
</head>
<body style="background-color:#F4ECF7">
<div class="tp">
<div class="x1 x"></div>
<div class="x2 x"></div>
<div class="x3 x"></div>
</div>
</body>
</html>
运行以上代码后，将弹出输出窗口，显示一个 div 盒子，其中一个应用了 display 属性，并在网页上显示。
.
更新于： 2024年1月8日
814 次查看
广告