display：none ， visibility：hidden ， opacity：0

最新推荐文章于 2024-09-30 15:42:36 发布

Yoky_jj

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量288

点赞数

分类专栏：前端文章标签：前端 css3 display：none opacity：0 visibility：hidden

本文链接：https://blog.csdn.net/Yoky_jj/article/details/100716149

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

空间：

相同：三者都会使元素‘消失’，在页面上无法看见

不同：display：none ----------> 消失后不会占据原来的位置

      opacity：0，visibility：hidden ----------> 消失后会占据原理的位置

代码：

display的情况：


<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8">

<style type="text/css">

.comparison,.dis{

width: 200px;

height: 200px;

background-color: pink;

}

.dis{

display: none;

}

</style>

</head>

<body>

<div class="comparison"></div>

<div class="dis"></div>

<span>hello world</span>

</body>

</html>

在这里插入图片描述

opacity的情况：


<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8">

<style type="text/css">

.comparison,.dis{

width: 200px;

height: 200px;

background-color: pink;

}

.dis{

opacity: 0

}

</style>

</head>

<body>

<div class="comparison"></div>

<div class="dis"></div>

<span>hello world</span>

</body>

</html>

visibility的情况：


<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8">

<style type="text/css">

.comparison,.dis{

width: 200px;

height: 200px;

background-color: pink;

}

.dis{

visibility: hidden;

}

</style>

</head>

<body>

<div class="comparison"></div>

<div class="dis"></div>

<span>hello world</span>

</body>

</html>

在这里插入图片描述

继承：

display不会被子元素继承,visibility会被子元素继承，看下面：

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8">

<style type="text/css">

.comparison,.dis,.apple{

width: 200px;

height: 200px;

background-color: pink;

}

.dis{

visibility: hidden;

}

</style>

</head>

<body>

<div class="comparison"></div>

<div class="dis">

<div class="apple"></div>

</div>

<span>hello world</span>

</body>

</html>

图片: 在这里插入图片描述
opacity