CSS之元素隐藏属性对比：overflow: hidden; visibility: hidden; display: none;

最新推荐文章于 2023-03-23 21:29:16 发布

iuukai

最新推荐文章于 2023-03-23 21:29:16 发布

阅读量1k

点赞数 2

分类专栏： CSS # css属性对比测试

本文链接：https://blog.csdn.net/weixin_45389633/article/details/104311805

版权

CSS 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

css属性对比测试

2 篇文章 0 订阅

订阅专栏

相同：三者都能使元素隐藏。

区别：

overflow: hidden;溢出隐藏。这个说是隐藏，倒不如说是裁剪，把超出显示的区域裁剪掉，与clip类似。

visibility: hidden;隐藏可见性。这个是把元素隐藏掉，相当于100%透明，不可见，但是还是占位置，占空间。（相当于哈利波特披上隐形斗篷，他还能碰到物体）
display: none;不显示。这个隐藏看不见也不占空间。

元素先visibility: hidden;隐藏，再通过visibility: visible;显示出来，这个方法占空间的，无论在隐藏时还是被显示时。
元素先display: none;隐藏，再通过display: block;显示出来，这个方法不占空间，无论在隐藏时还是被显示时。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title>
<style type="text/css">
body, p {
    padding: 0;
    margin: 0;
}

.container {
    min-width: 100%;
    min-height: 100%;
    background: #fcc;
    position: absolute;
}

.wrap {
    width: 500px;
    height: 300px;
    margin: 0 auto;
}

.wrap p {
    color: blue;
    font-size: 20px;
    font-weight: bold;
}

.wrap .child {
    width: 200px;
    height: 200px;
}

.wrap .add-visibility {
    background: red;
    /*visibility: hidden;*/
}

.wrap .add-display {
    background: yellow;
    /*display: none;*/
}
</style>
</head> 
<body>
    <div class="container">
        <div class="wrap">
            <p>visibility隐藏显示测试，测试元素为红色</p>
            <div class="child add-visibility">这是测试部分</div>
            <div class="child-brother">这是兄弟元素，检测是否占位</div>
        </div>
        <div class="wrap">
            <p>display隐藏显示测试，测试元素为黄色</p>
            <div class="child add-display">这是测试部分</div>
            <div class="child-brother">这是兄弟元素，检测是否占位</div>
        </div>
    </div>
</body>
</html>