简单比较display、visibility、opacity

在实际的写html中，我们常用到display、visibility、opacity这三个元素来渲染我们的元素，但是这三个元素使用也是有讲究的。

首先来看一个简单的excel表格，对这三个元素做了简单的一些比较


比较display:noneopacity:0visibility: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;}