元素的显示与隐藏

最新推荐文章于 2023-04-14 17:05:16 发布

少年张狂

最新推荐文章于 2023-04-14 17:05:16 发布

阅读量116

点赞数

本文链接：https://blog.csdn.net/weixin_41909678/article/details/118404937

版权

也能控制元素是否占有原来的位置

比如网站广告，当我们点击关闭时会消失。当我们刷新页面时会重新出现

本质：让一个元素在页面中隐藏或者显示出来

3种显示隐藏的方法：

display 显示隐藏不保留原先的位置
visibility 显示隐藏保留原先的位置
overflow 溢出显示隐藏对溢出的部分进行处理

display 属性（面试会问）

用于设置一个元素应如何显示

属性值	描述
none	隐藏对象
block	除了转换为块级元素外，同时还有显示元素的意思

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

后面应用及其广泛，搭配 JS 可以做很多网页特效

visibility 可见性

属性值	描述
inherit	继承上一个父对象的可见性
visible	对象可见
hidden	对象隐藏
collapse	主要用于隐藏表格中的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于 hidden（较少使用）

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

如果隐藏的元素需要占据原先的位置，使用 visibility: hidden

如果隐藏的元素不需要占据原先的位置，使用 display: none（用处更多，重点）

overflow 溢出显示隐藏

指定如果内容在一个元素的框中溢出（超过其指定的高度或宽度）时，应该如何显示

属性值	描述
visible	不剪切内容也不添加滚动条
auto	在需要的时候剪切内容并添加滚动条
hidden	不显示超过对象尺寸的内容
scroll	总是显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的内容会影响网页布局

但是如果有定位的盒子，请慎用 overflow: hidden; 因为它会隐藏多余的部分

综合案例

土豆网鼠标经过显示遮罩

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="tudou">
            <div class="mask"></div>
            <img src="images/tudou.jpg" alt="">
        </div>
    </body>
</html>

.tudou {
    position: relative;
    width: 444px;
    height: 320px;
    background-color: #00a4ff;
    margin: 100px auto;
}
.tudou img {
    width: 100%;
    height: 100%;
}
.tudou .mask {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    /*display: none;*/
    width: 444px;
    height: 320px;
    background: rgba(0,0,0,.4) url("images/button.png") no-repeat center;
}
/*当鼠标经过 tudou ,让 mask 显示出来*/
.tudou:hover .mask {
    display: block;
}

效果图

少年张狂

关注

0
点赞
踩
1

收藏

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

目录display 属性（面试会问）visibility 可见性overflow 溢出显示隐藏综合案例土豆网鼠标经过显示遮罩也能控制元素是否占有原来的位置比如网站广告，当我们点击关闭时会消失。当我们刷新页面时会重新出现本质：让一个元素在页面中隐藏或者显示出来3种显示隐藏的方法：display 显示隐藏不保留原先的位置 visibility 显示隐藏保留原先的位置 overflow 溢出显示隐藏 ...
复制链接

扫一扫