【HTML+CSS】元素隐藏

💡在网页中，元素或元素内容的经常需要用到显示和隐藏，特别是在使用：hover时用到鼠标滑过显示和隐藏的效果。由于将页面中的元素影藏有很多种方法，本次重点介绍的是visibility，将会从属性继承，是否占据页面空间，以及结果是否可逆三个方面探讨visibility的使用。
如果还想详细了解display、opacity等隐藏元素的方法，可以点击右上角专栏……

visibility

visibility决定元素是否影藏

• visibility 默认 显示
• hidden 隐藏

visibility: hidden

• 元素以及里面的内容全部隐藏
• 占据页面空间
• 结果可逆

💡代码演示

<style>
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;
            visibility: hidden;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            visibility: visible;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
</style>
<div class="father">
        <div class="son"></div>
</div>
<div class="box"></div>

💡执行结果截图

决定元素隐藏显示的三种方法

1. display: none
2. opcity: 0
3. visibility: hidden

区别

• display: none不占据页面空间
• opacity: 0 和 visibility: hidden 占据页面空间
• display: none 和 visibility: hidden 结果可逆
• opcity: 0 结果不可逆
• opcity: 0 有中间值