CSS核心（三十三）元素的显示和隐藏 display与visibility的区别

人亦已歌 · 发表于 2023-2-1 12:05:18

display有两个值，display:none;表示隐藏元素，隐藏后不占网页空间，后面的元素会自动进入该空间。display:block;可以让隐藏的元素显示出来，但它是以块元素的形式显示，其实是将一个元素转为了块元素，显示后占一行。
visibility也有两个值，visibility:hidden;表示隐藏元素，隐藏后占网页空间，即：该空间的占位会保留。visibility:visible;显示隐藏的元素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素的显示和隐藏 display与visibility的区别</title>
</head>
<style>
        .box{
                width:400px;
                height:400px;
                background:#0f0;        
        }
        .small{
                width:200px;
                height:200px;
                background:#f00;
                margin:0 auto;        
                /* display隐藏,不占空间 */
                /* display:none;  */
                /* visibility隐藏，占空间 */
                visibility:hidden;
        }
        .box:hover .small{
                /* 让元素以块元素的形式出现 */
                /* display:block; */
                
                visibility:visible;
        }
</style>
<body>
<div class="box">
        <div class="small">隐藏显示</div>
</div>
</body>
</html>

显示结果如下：

将鼠标移动到父元素上显示隐藏的元素。

CSS核心（三十三）元素的显示和隐藏 display与visibility的区别