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

CSS-元素的显示与隐藏

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

目录

使用场景

display属性

visibility 可见性

overflow 溢出

博主个人兴趣

使用场景

案例网站广告当我们点击关闭就不见了重新刷新页面广告又会出现

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

display属性

display设置一个元素应如何显示

display:none; 隐藏对象
display:block; 1.转换为块级元素 2.显示元素

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

实践

visibility 可见性

visibility:vsible; 元素可视
visibility:hidden; 元素隐藏

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

实践

overflow 溢出

overflow属性指定了如果内容溢出一个元素的框(所规定的高度及宽度)时,会发生什么.

属性	描述
visible	不剪切内容也不添加滚动条
hidden	不能显示超过对象尺寸的内容,超出的部分隐藏掉
scroll	不管超出内容与否,总显示滚动条
auto	超出自动显示滚动条,不超出的就不显示滚动条

一般情况下,我们都不想让溢出的内容显示出来,溢出部分会影响布局.

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

案例:如果父级元素不设置宽高，实际宽高则由内容撑开。倘若子元素设置绝对定位，则子元素脱离文档流，那么父元素高度为0。如果父元素再设置定位，并且设置overflow: hidden。则此时子元素会消失（看不见啦）

实践

博主个人兴趣

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

上一篇：实例讲解Simulink的Assignment模块
下一篇：前端常见面试题之display:none和visibility:hidden的区别

相关推荐

饿了么面试官:实现一下 Element-UI 官网的主题切换动画!: 最近看到ElementPlus官网上的切换主题方式非常有趣，这是一个过渡的动画效果所以在网上查了一番，找到基本的实现方法实现基本效果首先我们起一个html文件，写一个按钮，以及简单的背景颜色切...

强大而好用的选择器:focus-within: 伪类和伪元素在开发网页样式中，选择器必不可少，而且选择器也是在开发css中非常重要的内容，包括常用的类选择器，id选择，同时还有伪类，伪类选择器最大的特点就是冒号开头。平时也经常会有小伙伴问到，在使用...

令程序员惊叹的一些CSS3效果库: 还在寻找那些CSS3的效果库吗？如果你的答案是肯定的，并且目前没有找到，那么你一定不能错过小编为大家收集的这些CSS3效果库，这是一个令你兴奋的集合！最新的CSS3都配备了新的特性，来设计创建动画和互...

伪元素黑魔法:一个替代onerror解决图片加载失败的方案: 问题的引出是这样的，在一个项目中有大量的页面主体是table做数据展示，所以就封装了一个table的组件，提供动态渲染的方案。有个问题是数据类型中有图片，对于图片的加载失败我们需要做容错。一般我们的思...

前端 - 如何通过CSS修改图片透明度: 如果在图片上显示文字，经常会遇到这个情况，就是当文字和背景颜色差不多时，文字会看不清楚，我们一般通过给文字加textshadow或者修改图片的透明度来让文字显示更加突出。我们今天说一下透明度的问题，...

CSS元素居中方法完全指南: 这里是工作狂的聚集地职场学术新媒体设计极客专门治愈处女座强迫症。本文为CSS入门翻译redman9原载CSS-Trick人们经常抱怨在CSS中居中元素的问题，其实这个问题并不复杂，只是因为方法众...

CSS图像 hover 动画效果: 点击页底“阅读原文”下载原码CSSHover在网页设计中是极为常用的一个CSS效果，只要你有创造力，都可以让Hover变得更多姿多彩，今天我们主要分享40多款使用CSSHOVER完成...

前端能限制用户截图吗?: 摘要：在某些业务场景下，保护屏幕信息的私密性，防止用户随意截图分享，成为了前端开发者的一个棘手需求。但浏览器和操作系统的设计，真的允许网页开发者完全掌控用户的截图行为吗？本文将深入探讨前端限制截图的...

每天一个CSS小技巧 - 不规则投影: 当我们想给一个矩形或者其他能用border-radius生成的形状加投影时，box-shadow的表现都很棒的。但是，当元素添加可一些伪元素或半透明的装饰之后，border-radius会无视这些。这...

Web开发中10个有用的免费CSS代码: 在本文中主要展示了在Web开发中一些免费但是非常有用的代码，开发人员可以下载它们来简化工作流程。在这个集合中的所有代码都是经过精挑细选的，对于开发人员来说非常有用。在开发一个网站时，这些代码将节省大量...

什么是伪类和伪元素?两者有什么区别?单一冒号和双冒号有何不同: https://juejin.im/post/5df1e312f265da33d039d06d?utm_source=bigezhang.com#comment伪类伪类存在的意义是为了通过选择器找到那...

CSS2与CSS3中常用的伪类汇总大全: CSS2与CSS3中有非常多的伪类，可以用于实现各种强大的、酷炫的功能。有用于选择标签状态的，如：a:linka:hoverinput:checkedinput:focus等；也有用于根据结构选...

实用!这8个CSS工具可以提升编程速度: 作为网页设计师，为了在预期的时间内能完成项目，前期肯定是要进行大量练习的。但是如果你花了大量的时间在编写CSS代码上，那无疑是浪费时间。工欲善其事必先利其器，聪明的设计师善于利用工具提升他们的编码效率...

《丝路传说怀旧版》宠物融合丹:属性加成与技能继承要点: 在《丝路传说怀旧版》中，宠物融合丹是优化宠物属性与技能的核心道具，其使用需结合技能继承规则、品质提升机制及资源规划策略。以下是关键要点分析一、属性加成机制品质提升与属性增长品质阶梯：宠物分为白、绿、蓝...

Python 3.14 t-string 要来了，它与 f-string 有何不同?: Python最近出了个大新闻：PEP-750t-string语法被正式采纳了！这意味着Python将在今年10月发布的3.14版本中引入一种新的字符串前缀t，称为模板字符串（Tem...

一周热门

最近发表

首页
收录
顶部