display:none和visiblity:hidden区别
2024-09-26 15:12:48
相同:
1、两者都能隐藏元素。
不同:
1、display:none 不占页面空间,visiblity:hidden 占据原先页面空间。
这里必须说明的是,元素不占页面空间后,取该元素或其内部元素的宽高值永远是0。如果想隐藏又想取到宽高值,那就得用visiblity:hidden。
2、display:none 的子元素也一定无法显示,visiblity:hidden 的子元素可以设置显示。
display:none元素及其子元素都将隐藏,而visiblity:hidden元素的子元素却可以设置visibility: visible 显示出来。在这一点上,如果页面是比较复杂或者是不受控制的,就要慎重使用visiblity:hidden,因为保不齐哪个元素被设置成可见,影响显示效果。
3、display:none 引起页面重绘和回流, visiblity:hidden 只引起页面重绘。
visiblity:hidden 看起来的性能比display:none好些,在两者都能使用情况下,可先考虑visiblity:hidden。但也不用千方百计用visiblity:hidden,用哪个还是看需求,性能优化只是其中一部分,莫要本末倒置。
最新文章
- Spring学习记录1--@Transactional Propagation
- 探讨兼容IE低版本的PC端响应式布局
- 升级java8---from centos
- 用 C 扩展 python
- 使用Diagnose服务查看Azure网站诊断信息
- jquery获取、改变元素属性值
- [js]多个物体的运动
- nginx linux 下开机自动启动
- Java多线程——<;四>;让线程有返回值
- PowerShell远程连接主机进行会话
- [Java]HashMap的两种排序方式
- python中函数与函数之间的调用,总是晕菜,整理如下,有不对或者补充的请提出来~
- js中的IP格式正则匹配校验详解~
- window.location.hash 使用说明
- mysql服务器主从数据库同步配置
- BZOJ4241历史研究——回滚莫队
- USM-V1.0
- ATL编程初级教程(图文事例)(VC6)
- VMWAR-workstatuon : 安装win10、server 2008 r2、server 2012 r2
- Android 全局弹出版本更新 Dialog 思考和解决办法
热门文章
- c#使用PortableDeviceApiLib读取便携式设备(WPD:Windows Portable Devices)信息
- SQL---索引---创建索引
- propertychange 不起作用
- 【epub.js|翻译|原创】开源中间件epub.js的使用及其中文文档
- openstack pike 单机 一键安装 shell
- RabbitMQ Cluster群集安装配置
- 运行时动态库:not found 及介绍-linux的-Wl,-rpath命令
- Nginx的知识分享,继续上次的分享
- 【java系列】java开发环境搭建
- tomcat警告setting property &#39;debug&#39; to &#39;0&#39; did not find a matching property