目录
一、简介
1、display
- 规定元素应该生成的框的类型。
- 将DOM元素设置为隐藏，该隐藏是不占位置的，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。
2、visibility
- 规定元素是否可见。
- 将透明度设置为0，仅仅是看不见而已，还是占位置的。审查元素的时候还是可以找的到的。
3、opacity
- 设置一个元素的透明度级别。
- 将DOM元素设置为隐藏，但是该隐藏仅仅是看不见而已，还是占位置的，也即是说它仍具有高度、宽度等属性值。
下面看这三行代码:
display:none;
visibility:hidden;
opacity:0;我们可以知道这三条属性所形成的元素效果是一样的，但是他们本质上有什么区别呢?
二、知识点补充
1、浏览器渲染过程
- 处理 HTML 标记并构造 DOM 树。
- 处理 CSS 标记并构造 CSSOM 树。
- 将 DOM 与 CSSOM 合并成一个渲染树。
- 根据渲染树来布局，以计算每个节点的几何信息。
- 将各个几点绘制到屏幕上。
2、回流
浏览器在加载页面的时候会生成一个render（渲染）树，加载完成后当渲染树中的某一些元素发生了比如形状，尺寸，隐藏，由于元素之间位置的相互关系发生改变，都会使渲染树发生改变，从而需要重新构建渲染树，这叫回流。
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则具有人道主义关怀，虽然不得已害死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），百姓比较淡然（无渲染与回流）。
四、知识点延伸
1、display
display的属性：block（默认值，设置为块级元素，独占一行），inline（设置为行内元素，不独占一行），none（设置为隐藏）
2、visibility
visibility的属性：visible（默认值，设置为可见），hidden（设置为不可见），inherit（继承上级的visibility），collapse（只对table有用）
3、opacity
需要考虑兼容性问题，低版本的IE是filter:alpha(opacity=50);