CSS笔记——元素的显示和隐藏

最新推荐文章于 2022-08-01 11:21:39 发布

Yomuki

最新推荐文章于 2022-08-01 11:21:39 发布

阅读量155

点赞数

分类专栏： css笔记

本文链接：https://blog.csdn.net/Yomuki/article/details/109997975

版权

css笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

display	none	不占位	常用
visibility	visible/hidden	占位
overflow	visible/hidden/scroll/auto

一、 display

display: none;

display隐藏元素后，不再占有原来的位置。

二、visibility

visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit

visibility隐藏元素后，继续占有原来的位置。

三、overflow 针对溢出部分

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。不超出也显示滚动条
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。超出才显示滚动条，不超出就不显示滚动条
inherit

    <style>
        .box{
            position: relative;
            width: 444px;
            height: 320px;
        }
        .box .img {
            width: 100%;
            height: 100%;
        }
        .gai {
            position: absolute;
            display: none;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5) url('../img/arr.png') no-repeat center;
        }
        .box:hover .gai {
            display: block;
        }
    </style>

<body>
    <div class="box">
        <img class="img" src="../img/tudou.jpg" alt="">
        <div class="gai"></div>
    </div>
</body>

视频地址