关于display:none;和visibility:hidden;的相同点和不同点

最新推荐文章于 2024-10-29 07:30:00 发布

ou~吼

最新推荐文章于 2024-10-29 07:30:00 发布

阅读量524

点赞数 1

文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/ttl1076005106/article/details/103902567

版权

相同点：

display:none;和visibility:hidden;都是使元素隐藏

设置前：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div style="width: 100px;height: 100px;background: red;"></div>
<p>没有设置display:none;</p>
<div style="width: 100px;height: 100px;background: pink;"></div>
<p>没有设置visibility:hidden;</p>
</body>
</html>

效果图：
在这里插入图片描述
设置后：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div style="width: 100px;height: 100px;background: red;display:none;"></div>
<p>设置display:none;元素被隐藏</p>
<div style="width: 100px;height: 100px;background: pink;visibility:hidden;"></div>
<p>设置visibility:hidden;元素被隐藏</p>
</body>
</html>

效果图：
在这里插入图片描述
**
**

不同点：

**
display:none;将元素的显示设为无，即在网页中不占任何的位置;
visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div style="width: 100px;height: 100px;background: red;display:none;"></div>
<p>设置display:none;元素被隐藏</p>
<div style="width: 100px;height: 100px;background: pink;visibility:hidden;"></div>
<p>设置visibility:hidden;元素被隐藏</p>
</body>
</html>

效果图：
在这里插入图片描述