CSS display: none; 和 visibility: hidden; 的区别
cssweb developmentfront end technology更新于 2024/4/11 13:00:17
CSS display: none;
display: none 属性用于隐藏元素但不删除它们。它不占用任何空间。
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
display: none;
}
</style>
</head>
<body>
<h2>This heading is visible</h2>
<h3>This is a hidden heading</h3>
<p>The hidden heading does not take up space even after hiding it since we have used display: none;.</p>
</body>
</html>
CSS visibility: hidden;
visibility: hidden 属性也会隐藏元素，但会影响布局，即占用空间。我们来看一个例子
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
visibility: hidden;
}
</style>
</head>
<body>
<h2>This heading is visible</h2>
<h3>This is a hidden heading</h3>
<p>The hidden heading takes up space even after hiding it.</p>
</body>
</html>
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
