HTML+CSS学习总结 Day01 使元素消失的几种常见方式
ONE-完全消失
display:none
给元素设置display: none;后,元素会脱离文档流,它原本占据的空间会被其他元素占有,适用于元素完全消失
<style type="text/css">
div{
width: 100px;
height: 100px;
}
.d1{
background-color: aqua;
}
.d2{
background-color: aquamarine;
display: none;
}
.d3{
background-color: pink;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
TWO-隐藏占位
visibility: hidden
visibility设置值:inherit(继承父级元素的属性)
visible(显示)
hidden(隐藏) 内容隐藏,但是空间位置还是保留
visibility英文单词的意思是“能见度,可见度”
在html里面,给元素设置visibility: hidden;后,元素会从页面中消失,但他它原本占据的空间会被保留,适用于希望元素隐藏又不影响页面布局的场景。
- visibility:hidden,会被子元素继承,通过设置子元素visibility:visible来显示子元素。
- visibility:hidden 不会触发它上面绑定的事件。
- transition对于visibility是无效的。
<style type="text/css">
div{
width: 100px;
height: 100px;
}
.d1{
background-color: aqua;
}
.d2{
background-color: aquamarine;
/* visibility: hidden; */
}
.d3{
background-color: pink;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
Three-透明度
opacity:0
opacity 透明度
是一种视觉隐藏,将元素变得透明
- transition对于opacity是有效。
<style type="text/css">
div{
width: 100px;
height: 100px;
}
.d1{
background-color: aqua;
opacity: 0;
}
.d2{
background-color: aquamarine;
opacity: 0.5;
}
.d3{
background-color: pink;
opacity: 1;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
Fore-放大缩小
transform: scale(0,0)
<style type="text/css">
div{
width: 100px;
height: 100px;
}
.d1{
background-color: aqua;
}
.d2{
background-color: aquamarine;
transform: scale(0,0);
}
.d3{
background-color: pink;
}
</style>
效果和 visibility: hidden一致
通过缩放达到元素消失的视觉效果,元素仍占据空间