热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

06.css入门笔记元素的显示与隐藏

文章目录前言元素的显示与隐藏1、display2、visibility:用于指定元素显示或隐藏3、overflow是对溢出的地方进行显示或者隐藏总结前言今天分享的内容

文章目录

前言

元素的显示与隐藏

1、display

2、visibility: 用于指定元素显示或隐藏

3、overflow 是对溢出的地方进行显示或者隐藏

总结




前言

今天分享的内容比较简单,具体大家可以往下看哦




元素的显示与隐藏


1、display

display: none; 用于隐藏元素

display: block; 除了可以转化为块元素外,还有显示元素的作用

特点是:隐藏后,不在占有原来的位置




2、visibility: 用于指定元素显示或隐藏

visibility: visible; 显示元素

visibility: hidden; 隐藏元素

特点:隐藏后继续占有原来的位置

应用场景:网站中的广告,刷新后还会出现




3、overflow 是对溢出的地方进行显示或者隐藏

overflow: visible; 默认是超出的部分显示

overflow: hidden; 隐藏多出的部分

overflow: scroll; 溢出的部分显示滚动条,不溢出也会显示

overflow: auto; 在超出的时候,显示滚动条

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





总结

display、visibility、overflow 都可以实现对元素的显示或隐藏。但是要区分各自的使用场景。


推荐阅读
  • Mysqlcheck作为MySQL提供的一个实用工具,主要用于数据库表的维护工作,包括检查、分析、修复及优化等操作。本文将详细介绍如何使用Mysqlcheck工具,并提供一些实践建议。 ... [详细]
  • 为何第三个div会影响其他两个div?
    探讨了在使用内联块(inline-block)元素布局时,第三个div如何影响前两个div的位置,并提供了具体的解决方案。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 本文详细介绍了JQuery Mobile框架中特有的事件和方法,帮助开发者更好地理解和应用这些特性,提升移动Web开发的效率。 ... [详细]
  • 回顾两年前春节期间的一个个人项目,该项目原本计划参加竞赛,但最终作为练习项目完成。独自完成了从编码到UI设计的全部工作,尽管代码量不大,但仍有一定的参考价值。本文将详细介绍该项目的背景、功能及技术实现。 ... [详细]
  • 本文探讨了在UIScrollView上嵌入Webview时遇到的一个常见问题:点击图片放大并返回后,Webview无法立即滑动。我们将分析问题原因,并提供有效的解决方案。 ... [详细]
  • 本文通过一个示例展示了如何使用HTML和CSS美化并实现响应式的按钮组。 ... [详细]
  • 在移动端开发中,多点触控手势是提升用户体验的重要手段。然而,目前只有iOS浏览器原生支持手势事件,其他设备需要通过touchstart、touchmove和touchend等基础事件进行自定义实现。本文将详细介绍如何在Vue项目中实现多点触控手势。 ... [详细]
  • IEC60825激光产品安全标准详解
    随着激光技术在全球范围内的广泛应用,尤其是激光投影显示技术的兴起,了解和遵守相关的安全标准变得尤为重要。本文将详细介绍IEC60825激光产品安全标准及其重要性。 ... [详细]
  • 本文详细介绍了笔记本电脑上多种实用的快捷键,包括屏幕调整、图形设置、分辨率更改、驱动更新、导航操作、音量控制及屏幕锁定等,旨在帮助用户更高效地使用笔记本电脑。 ... [详细]
  • 本文详细介绍了Elasticsearch中的分页查询机制,包括基本的分页查询流程、'from-size'浅分页与'scroll'深分页的区别及应用场景,以及两者在性能上的对比。 ... [详细]
  • Centos7 Tomcat9 安装笔记
    centos7,tom ... [详细]
  • 本文介绍了如何将Spring属性占位符与Jersey的@Path和@ApplicationPath注解结合使用,以便在资源路径中动态解析属性值。 ... [详细]
  • 一个转子曲线面积问题及其反问题的解答
    曾经解答过这样一个问题,从该ID的最后一次登录时间、该ID显示的专业信息,误以为是新闻里某个想不开的同学,不安了一阵子。经确认是我多虑了,不过把问题答案还是写出来。之后就收到一堆要求帮忙算 ... [详细]
  • 用C语言实现的科学计算器,支持2种常量,10种基本函数,Ans寄存器。相对来说拓展性应该是不错的,思路是首先化简复杂名称的函 ... [详细]
author-avatar
qwqwd
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有