display , visibility 于 opacity 的比较，同时涉及到的页面重绘，渲染问题

      重绘：元素的外观改变，但是没有影响dom的整体结构即为重绘。

      渲染：元素的外进行改变的同时，dom结构也会改变的过程即为渲染，一般情况下渲染之后都会进行重绘。

      visibility: hidden ；会保留其所占用的空间，仅为视觉上的完全透明（虽然看不见、但是摸得着）

      opacity：0；从视觉上让元素消失，但是仍然会保留元素原本所占用的空间（看不见摸得着）

      display:  none ；不为被隐藏的对象保留其物理空间（即看不见摸不着）

      在这里也可以联想一下vue 中的 v-show 和 v-if ，v-show 是控制元素的显示与隐藏，转化之后就是display：none；但是 v-if 是直接删除和创建dom节点，所以编译之后就啥也看不到控制台里显示(下图),内容为空。

<!------->

      现在通过这几种隐藏的方式大概也能了解与渲染，重绘之间的关系，visibility 不一定会引起重绘，opacity 只会引起重绘，display v-show v-if 则会引起页面的渲染。