display：none、visibility:hidden和opacity：0

 

1.占据空间

当设置元素为display:none时，此元素将不在占据空间，也就相当于把这个元素从html页面中删除掉了。而opacity：0和visibility：hidden时，只是这个元素被我们隐藏起来了，它们的元素所占据的空间依然被保留，别的元素无法占据它们的位置。

 

既然设置display:none不占据空间，那么我们如果触发一个事件需要显示这个被我们display:none掉的元素，也就是让它display：block时，就会占据页面一定的位置空间，此时就要小心这个元素显示后会不会影响我们页面的布局问题。当然，opacity和visibility隐藏元素后本来的位置时被页面保留了的，就不存在影响布局问题的担心。
2.回流和渲染

 

 3.继承

父元素display：none后，相当于从页面中释放了父元素所占据的空间，既然位置都没有了，那么子元素继承了父元素的这么属性也无济于事，因此这个属性不会被继承，那么也不存在反继承了。

父元素设置了visibility:hidden或者opacity：0之后，虽然它们的位置被保留，但是由于子代是会继承下来，因此子代在页面上也不会显示。也就是说，父代设置了这两个属性之后，子代也会有相应的效果。  但是只有当父元素设置了visibility属性后子元素能通过visibility:visible显示出来，也就是反继承。

4.transition

设置了display：none之后，元素相当于从页面中被踢出去了，transition效果就不生效了，绑定在这个元素上的效果也就不存在了。

而设置了opacity：0之后，元素位置依然被保留，所以transition效果依然存在，绑定在这个元素上的效果也存在。但是设置了visibility:hidden之后，元素位置依然被保留，但是元素的transition效果就不会生效了，绑定在这个元素上的事件也不会被触发。