CSS笔记-元素的隐藏(display与visibility)

最新推荐文章于 2025-04-20 14:47:41 发布

原创最新推荐文章于 2025-04-20 14:47:41 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

8 篇文章

订阅专栏

这篇CSS学习笔记探讨了元素隐藏的两种方法——display: none;和visibility: hidden;。通过示例代码和效果展示，解释了display: none;会移除元素占用的空间，而visibility: hidden;则保留了元素的空间但使其不可见。

文章目录

前言
一、原状态的CSS
- 1. 原状态的CSS代码：
- 2. 原状态的效果：
二、display: none;的CSS
- 1. display: none;的CSS代码：
- 2.display: none;的效果(.vis盒子覆盖了.dis盒子的位置)：
二、visibility: hidden;的CSS
- 1. visibility: hidden;的CSS代码：
- 2.visibility: hidden;的效果(.dis盒子隐藏了,但位置保留了)：
总结

前言

CSS学习笔记-元素的隐藏(display与visibility)

3个状态均使用同一HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>元素的隐藏(display与visibility)</title>
</head>
<body>
  <div class="dis">display</div>
  <div class="vis">visbility</div>
</body>
</html>

一、原状态的CSS

1. 原状态的CSS代码：

.dis{
	width: 100px;
	height: 100px;
	background-color: lightblue;
}
.vis{
	width: 100px;
	height: 100px;
	background-color: green;
}

2. 原状态的效果：

在这里插入图片描述

二、display: none;的CSS

1. display: none;的CSS代码：

.dis{
	width: 100px;
	height: 100px;
	background-color: lightblue;
	display: none;
}
.vis{
	width: 100px;
	height: 100px;
	background-color: green;
}

2.display: none;的效果(.vis盒子覆盖了.dis盒子的位置)：

在这里插入图片描述

二、visibility: hidden;的CSS

1. visibility: hidden;的CSS代码：

.dis{
	width: 100px;
	height: 100px;
	background-color: lightblue;
	visibility: hidden;
}
.vis{
	width: 100px;
	height: 100px;
	background-color: green;
}