关于display,opacity,visibility的区别

一.display,opacity与visibility

display属性规定元素应该生成的框的类型。
opacity属性设置一个元素的透明度级别。
visibility 属性规定元素是否可见。
下面看这三行代码:

display:none;
visibility:hidden;
opacity:0;

我们可以知道这三条属性所形成的元素效果是一样的，但是他们本质上有什么区别呢?

二.知识点补充

(1)浏览器渲染过程

• HTML代码转化成DOM Tree
• CSS代码转化成CSSOM Tree（CSS Object Model）
• 结合DOM和CSSOM，生成一棵渲染树Render Tree
  （render tree能识别样式，render tree中每个NODE都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。）
• 生成布局（flow），将所有渲染树进行平面合成（！此步骤再次触发即回流）
• 将布局绘制（paint）在屏幕上（！此步骤再次触发即重绘）

(2)回流
浏览器在加载页面的时候会生成一个render（渲染）树，加载完成后当渲染树中的某一些元素发生了比如形状，尺寸，隐藏，由于元素之间位置的相互关系发生改变，都会使渲染树发生改变，从而需要重新构建渲染树，这叫回流。

有大量的用户行为以及潜在的DHTML改变会触发回流(reflow)。例如，改变浏览器窗口的大小，使用一些JavaScript方法，包括计算样式，对DOM进行元素的添加或删除，或是改变元素的class等。值得注意的是有一些操作产生的回流(reflow)时间可能要比你原先预想的要多。

(3)重绘
当渲染树中的某些元素发生的改变不会影响个元素之间的位置关系，比如color，background等只是改变外观，则不需要重建渲染树，这就叫做重绘。

(4)回流与重绘的区别
当发生回流时一定发生了重绘，但是当发生重绘时则不一定发生回流

三.三个属性的区别

1.空间占据

• display: none会使元素脱离文档流,不占据原来的空间。
• visibility: hidden和opacity: 0 虽然会使元素不可见,但是元素仍然占据原来的位置。

2.回流与渲染

• display:none使元素位置改变，会产生回流与渲染。
• visiblity:hidden与opacity:0使元素的属性发生改变，不会产生回流与渲染，会产生重绘。

3.株连性

• display: none,虽然被隐藏的子元素也会一起隐藏,并且当子元素设置display:block属性时并无效果。
  opacity:0也是一样的。当父级已经设置opacity:0后，子元素是基于父元素的opacity:0基础上的opacity值。无论子元素设置opacity为多大时均无效果。
• visibility:hidden就不一样了,我们将visibility的子元素设置为visibility:visibile时仍会起效果。

4.关于事件

• display:none属性使该元素无法再触发事件。
  visibility:hidden也无法触发事件。
• opacity: 0仍然可以触发事件。

5.关于transition

• display: none无法使用transition动画的,不会呈现过渡的效果
• transition是支持visibility的,visibility过渡过程的值范围是0-1,但是,当visibility的值 大于0,显示都是一样的。
  transition是支持opacity的,可以用来做动画效果

注意：这里有一个简单的例子可以很方便的区分display与visibility。
display:none是个相当惨无人道的声明，子孙后代全部被牵连至死（株连性），而且连块安葬的地方都不留（不留空间），导致百姓哗然（渲染与回流）。
visibility:hidden则具有人道主义关怀，虽然不得已害死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），百姓比较淡然（无渲染与回流）。