我们在写样式的时候，经常会用到display与opacity这两个，可能visibility用的会比较少。但是，对于这三个属性有什么区别，或者，不同地方的用法可能会有些迷糊不懂，我将详细的分析下这三个值的区别与用法。
1、浏览器如何渲染HTML代码？
1.构建dom 树、构建css 树，同时，进行
2.构建渲染（Render）树
3.节点布局（回流）
4.页面渲染，显示在屏幕中
2、区别？
1、display：none，就是发生在构建Render树种，并将其DIV隐藏，所以，在渲染成功后，我们将看不到这个DIV，所以，它既不占位也没事件。
2、opacity:0，它是所有的步骤都已经完成了，只是给它设置了一个透明度，相当于代码中是有这个DIV，并且也是占位了，我们只是看不到它，所以，它既占位也有事件。
3、visibility：hidden，它是浏览器已经完成了，节点布局。所以，它具有占位的功能，但是，并没有渲染到页面中，所以，不具有事件能力。
注意：在浏览器优化中，我们要尽量避免使用display，减少回流的次数。
