简单比较display、visibility、opacity
2017-01-19 21:59
260 查看
在实际的写html中,我们常用到display、visibility、opacity这三个元素来渲染我们的元素,但是这三个元素使用也是有讲究的。
首先来看一个简单的excel表格,对这三个元素做了简单的一些比较
一、占据空间
从上面一个excel表格中能看出,当设置元素为display:none时,此元素将不在占据空间,也就相当于把这个元素从html页面中删除掉了。而opacity:0和visibility:hidden时,只是这个元素被我们隐藏起来了,它们的元素所占据的空间依然被保留,别的元素无法占据它们的位置。
既然设置display:none不占据空间,那么我们如果触发一个事件需要显示这个被我们display:none掉的元素,也就是让它display:block时,就会占据页面一定的位置空间,此时就要小心这个元素显示后会不会影响我们页面的布局问题。当然,opacity和visibility隐藏元素后本来的位置时被页面保留了的,就不存在影响布局问题的担心。
二、回流与渲染
写张图片是我从网上找来的,帮助大家了解什么情况下能造成回流与渲染。关于这个问题,我目前不是很懂,所以就不讲了。
三、继承性和反继承性
所谓继承,都是指子代继承父代的东西。反继承就是子代设置自己的属性变得和父代不一样。
父元素display:none后,相当于从页面中释放了父元素所占据的空间,既然位置都没有了,那么子元素继承了父元素的这么属性也无济于事,因此这个属性不会被继承,那么也不存在反继承了。
父元素设置了visibility:hidden或者opacity:0之后,虽然它们的位置被保留,但是由于子代是会继承下来,因此子代在页面上也不会显示。也就是说,父代设置了这两个属性之后,子代也会有相应的效果。
但是只有当父元素设置了visibility属性后子元素能通过visibility:visible显示出来,也就是反继承。
四、transition效果和绑定的事件
设置了display:none之后,元素相当于从页面中被踢出去了,transition效果就不生效了,绑定在这个元素上的效果也就不存在了。
而设置了opacity:0之后,元素位置依然被保留,所以transition效果依然存在,绑定在这个元素上的效果也存在。
但是设置了visibility:hidden之后,元素位置依然被保留,但是元素的transition效果就不会生效了,绑定在这个元素上的事件也不会被触发。
很多时候,我们要让一个元素保留位置的同时不触发绑定在这个元素上的事件,此时要结合visibility、opacity、transition一起用才能实现这样的效果。(不得不说opacity和visibility结合了使用,使得同一个元素产生淡进淡出的效果很好用)。如下:
首先来看一个简单的excel表格,对这三个元素做了简单的一些比较
比较 | display:none | opacity:0 | visibility:hidden |
占据空间 | 否 | 是 | 是 |
回流与渲染 | 是 | 否 | 否 |
子代继承性 | 不继承 | 继承 | 继承 |
子代反继承 | 否 | 否 | 能 |
transition效果 | 无效 | 有效 | 有效 |
绑定的事件 | 不响应 | 能响应 | 不响应 |
从上面一个excel表格中能看出,当设置元素为display:none时,此元素将不在占据空间,也就相当于把这个元素从html页面中删除掉了。而opacity:0和visibility:hidden时,只是这个元素被我们隐藏起来了,它们的元素所占据的空间依然被保留,别的元素无法占据它们的位置。
既然设置display:none不占据空间,那么我们如果触发一个事件需要显示这个被我们display:none掉的元素,也就是让它display:block时,就会占据页面一定的位置空间,此时就要小心这个元素显示后会不会影响我们页面的布局问题。当然,opacity和visibility隐藏元素后本来的位置时被页面保留了的,就不存在影响布局问题的担心。
二、回流与渲染
写张图片是我从网上找来的,帮助大家了解什么情况下能造成回流与渲染。关于这个问题,我目前不是很懂,所以就不讲了。
三、继承性和反继承性
所谓继承,都是指子代继承父代的东西。反继承就是子代设置自己的属性变得和父代不一样。
父元素display:none后,相当于从页面中释放了父元素所占据的空间,既然位置都没有了,那么子元素继承了父元素的这么属性也无济于事,因此这个属性不会被继承,那么也不存在反继承了。
父元素设置了visibility:hidden或者opacity:0之后,虽然它们的位置被保留,但是由于子代是会继承下来,因此子代在页面上也不会显示。也就是说,父代设置了这两个属性之后,子代也会有相应的效果。
但是只有当父元素设置了visibility属性后子元素能通过visibility:visible显示出来,也就是反继承。
四、transition效果和绑定的事件
设置了display:none之后,元素相当于从页面中被踢出去了,transition效果就不生效了,绑定在这个元素上的效果也就不存在了。
而设置了opacity:0之后,元素位置依然被保留,所以transition效果依然存在,绑定在这个元素上的效果也存在。
但是设置了visibility:hidden之后,元素位置依然被保留,但是元素的transition效果就不会生效了,绑定在这个元素上的事件也不会被触发。
很多时候,我们要让一个元素保留位置的同时不触发绑定在这个元素上的事件,此时要结合visibility、opacity、transition一起用才能实现这样的效果。(不得不说opacity和visibility结合了使用,使得同一个元素产生淡进淡出的效果很好用)。如下:
div{ visibility:hidden; opacity:0; transition:all .5s; } div:hover{ visibility:visible; opacity:1; }
相关文章推荐
- CentOS 7安装图形界面及远程
- Linux 系统目录详解
- linux c 之数据库
- How does Linux detect your webcam?
- Linux 使用者操作功能与权限
- Spring基础:快速入门spring boot(6):用docker进行Build/Ship/Run
- 阿里云RDS数据本地恢复
- Linux系统chmod,chown和chgrp的区别
- linux下实现服务器与客户端(连接时给客户端发送时间)
- 看我如何利用漏洞窃取麦当劳网站注册用户密码
- Zabbix Server 3.0.7 Centos6.5编译安装
- Apache kafka系列之在zookeeper中存储结构
- Spark架构及运算逻辑
- Linux运维工程师真实的工作状态到底是怎么样的?
- Qt串口通讯程序-Linux环境
- 跳转指令
- win7使用技巧 cmd cd desktop cmd窗口切换到桌面
- win7使用技巧 cmd cd desktop cmd窗口切换到桌面
- VIM快速索引Linux内核中的API
- linux下使用apache ant搭建一个java项目