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一致
通过缩放达到元素消失的视觉效果，元素仍占据空间
186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
