首页 > 其他分享 >css显示隐藏

css显示隐藏

时间:2022-12-29 15:22:52浏览次数:29  
标签:none 元素 显示 visibility display hidden 隐藏 css

display:none 与 visibility:hidden 的区别?

元素隐藏和显示最常用的为 display:none 和 visibility:hidden

 

dispaly:none设置该属性后,该元素下的元素都会隐藏,占据的空间消失
visibility:hidden 设置该元素后,元素虽然不可见了,但是依然占据空间的位置

 

区别:
1.visibility 具有继承性,其子元素也会继承此属性,若设置 visibility:visible,
则子元 素会显示
2.visibility 不会影响计数器的计算,虽然隐藏掉了,但是计数器依然继续运行着。
3.在 CSS3 的 transition 中支持 visibility 属性,但是不支持 display,因为
transition 可以延迟执行,因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以
提高用户体验
4.display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘

 

标签:none,元素,显示,visibility,display,hidden,隐藏,css
From: https://www.cnblogs.com/liu-com/p/17012623.html

相关文章

  • 7个你可能从未使用过的Python隐藏技巧
    Python是每个程序员都喜欢的语言,因为它易于编码和易于阅读的语法。但是,你知道python有一些很酷的技巧可以用来让事情变得更简单吗?在今天的内容中,我将与你分享7个你可......
  • Android笔记--图像显示
    imageView具体实现:注意:图片名称应当为小写的英文字母与数字的结合,当然,二者可以只存在其一图片的放置的比例:(通过scaleType属性设置)ImageButtonImageButton和Butto......
  • allure报告中allure.title 如何去掉后方的参数化显示
    问题描述allure报告中allure.title会自动拼接上传的参数,如何参数很长,前端展示的样式会很丑,详情如下:解决办法在引入的allure_pytest中的listener.py文件的94行注释掉参数......
  • v6_css文本属性
    字体大小font-size:px浏览器默认16设计图常用12字体font-family:可同时设定多个字体,逗号分隔,直到识别匹配字体颜色color:3种可表示:颜色英文16进制写法rgb(0,0,255)调比......
  • 直播回顾|大规模点云显示技术
    大家好,本公众号现已开启线上视频公开课,主讲人通过B站直播间(bilibili号:3D视觉工坊:https://space.bilibili.com/483478083),对3D视觉领域相关知识点进行讲解,欢迎大家的关注。视......
  • CSS的skewX()函数二维倾斜实现平行四边形按钮和梯形按钮组
    CSS的skewX()函数二维倾斜实现平行四边形按钮和梯形按钮组https://blog.csdn.net/DDD4V/article/details/122417369......
  • ls-显示指定工作目录下的文件及属性信息
    格式:ls[参数][文件]-a显示所有文件及目录,包括"."开头的文件;-A显示所有文件及目录,不包括"."开头的文件-l列出文件及目录的详细信息(读写权限信息,文件字节大小,最新修......
  • ModStart 关于禁用后台页面多 TAB 显示的方法
    在最新的版本迭代过程中,系统默认开启了后台页面多标签打开支持。多页面标签其显示原理是将多个页面放置于iframe进行逻辑隔离。由于部分模块暂未完全支持,可通过如下方式临......
  • 《DFZU2EG_4EV MPSoc之FPGA开发指南》第三十五章 双目OV5640摄像头HDMI显示实验​
    双目OV5640摄像头HDMI显示实验​在双目OV5640摄像头RGB-LCD显示实验中,成功地在LCD屏上实时显示出了摄像头采集的图像。本章将使用FPGA开发板实现对双目OV5640的数字图像采集......
  • 在手机页面上显示table方案研究
     资料地址:https://elvery.net/demo/responsive-tables/ 第一种方案:当屏幕宽度小于一个值时,将不重要的列隐藏掉; 第二种方案:固定第一个列,其他列可以拉动展示 第三种方案......