在实际的写html中,我们常用到display、visibility、opacity这三个元素来渲染我们的元素,但是这三个元素使用也是有讲究的。
首先来看一个简单的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; }