当前位置：网站首页 > 技术文章 > 正文

CSS中元素显示、隐藏及其应用

zhezhongyun 2025-05-26 20:19 24 浏览

1.元素的显示与隐藏

display、visibility两个属性都可以实现元素的显示与隐藏

（1.1）display:none;隐藏元素；

display:block;以块级元素显示；

（1.2）visibility:hidden;隐藏元素；

visibility:visibile;显示元素；

display和visibility的区别在于，使用display属性隐藏元素后，不再占据原先位置；而使用visibility属性隐藏元素后，其原先位置仍被占据。

2.元素内容显示与隐藏

overflow属性会对溢出元素框的内容如何展示进行设置。

（2.1）overflow:visible;不做限制，保持原样显示，为默认值

（2.2）overflow:hidden;超出元素框的内容被隐藏

（2.3）overflow:scroll;添加滚动条，不管是否有内容溢出

（2.4）overflow:auto;当有内容溢出时，添加滚动条

3.元素显示与隐藏的应用

制作遮罩效果。

实现思路：遮罩层默认为隐藏，当鼠标在元素上方时则显示，鼠标不在元素上方时则隐藏。

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .outer {
            position: relative;
            width: 520px;
            height: 280px;
        }
         /* mask元素，默认不显示，设置为绝对定位，其父元素设置为相对定位 */
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
             /* 设置mask元素的背景的颜色、图标 */
            background: rgba(12, 12, 12, 0.2) url(imges/arrow.png) no-repeat center;
        }
           /* 伪类实现鼠标进入mask元素时效果 */
        .outer:hover .mask {
            display: block;
        }
    </style>

<body>

    <div class="outer">
        <img src="imges/tb.jpg" alt="">
          <!-- 遮罩层 -->
        <div class="mask"></div>
    </div>
</body>

CSS Display (显示) 与 Visibility（可见性）

上一篇：v-show 与 v-if 有什么区别?
下一篇：CSS 定位详解

CSS中元素显示、隐藏及其应用

1.元素的显示与隐藏

2.元素内容显示与隐藏

3.元素显示与隐藏的应用

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?