元素的显示与隐藏

最新推荐文章于 2024-08-16 19:04:45 发布

Liberty'

最新推荐文章于 2024-08-16 19:04:45 发布

阅读量348

点赞数 11

文章标签： css css3 前端 html

本文链接：https://blog.csdn.net/Queen741740155/article/details/138037552

版权

类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!
本质:让一个元素在页面中隐藏或者显示出来。

display 属性

display 属性用于设置一个元素应如何显示。

display：none ；隐藏对象。

display：block ；除了转换为块级元素之外，还有显示元素的意思。

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

 <style>
        .box1 {
            /* box1盒子被隐藏 */
            display: none;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box1">111</div>
    <div class="box2">222</div>
</body>

visibility 属性

用于指定一个元素应可见还是隐藏。

visibility : visible; 元素可视

visibility : hidden;元素隐藏

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

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

如果隐藏元素想要原来位置，就用visibility : hidden

如果隐藏元素不想要原来位置，就用display : none (用处更多重点)

 <style>
        .box1 {
            /* box1盒子被隐藏 */
            visibility: hidden;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box1">111</div>
    <div class="box2">222</div>

</body>

overflow 属性

在CSS中，overflow是一个重要的属性，用于控制当元素的内容超出其指定尺寸或容器尺寸时应该如何处理。它规定了当内容溢出元素框时发生的事情，例如内容是否会被修剪，溢出部分是否会被隐藏等。

overflow属性有四个可能的值：

visible（默认值）：内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的，不会显示滚动条。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容，即使内容没有超出容器的大小。
auto：浏览器会根据需要自动显示滚动条。如果内容被修剪，则显示滚动条以便查看其余的内容；如果内容没有超出容器，则不显示滚动条。

  .box {
            /* 默认 */
            /* overflow: visible; */

            /* 溢出部分隐藏 */
            /* overflow: hidden; */

            /* 滚动条总是显示 */
            /* overflow: scroll;*/

            /* 自动显示滚动条 */
            overflow: auto;


            width: 200px;
            height: 200px;
            margin: 0 auto;
            border: 3px solid pink;
        }
    </style>
</head>

<body>
    <div class="box">
        《假如给我三天光明》是美国当代作家海伦·凯勒的散文代表作。该文的前半部分主要写了海伦变成盲聋人后的生活，后半部分则介绍了海伦的求学生涯。同时也介绍她体会不同的丰富多彩的生活以及她的慈善活动等等。她以一个身残志坚的柔弱女子的视角，告诫身体健全的人们应珍惜生命，珍惜造物主赐予的一切。
    </div>
</body>

案例

 <style>
        .tudou {
            width: 444px;
            height: 320px;
            margin: 30px auto;
            background-color: pink;
            position: relative;
        }

        .tudou img {
            width: 100%;
            height: 100%;

        }

        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 444px;
            height: 320px;
            background: rgba(0, 0, 0, .4) url(images/视频短视频.png) no-repeat center;

        }

        /* 当鼠标经过 盒子时，就让盒子里面的遮罩层显示出来 */

        .tudou:hover .mask {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
</body>

Liberty'

关注

11
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
元素的显示与隐藏

在CSS中，overflow是一个重要的属性，用于控制当元素的内容超出其指定尺寸或容器尺寸时应该如何处理。它规定了当内容溢出元素框时发生的事情，例如内容是否会被修剪，溢出部分是否会被隐藏等。overflow属性有四个可能的值：visible（默认值）：内容不会被修剪，会呈现在元素框之外。hidden：内容会被修剪，并且其余内容是不可见的，不会显示滚动条。scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容，即使内容没有超出容器的大小。auto：浏览器会根据需要自动显示滚动条。如
复制链接

扫一扫