display:none vs visibility:hidden vs opacity:0

display:none ：用于隐藏元素，同时元素位置消失，但你依旧可以用它与DOM进行交互;

visibility:hidden ：也用于隐藏元素，区别是元素在文档流中依然占有位置;

opacity:0 ：还是用来隐藏元素的，设置透明度让元素隐身，所以依旧占有位置。

display:none,visibility:hidder,opacity:0三者都是需要浏览器渲染的，特别需要注意的是display:none。

举个栗子吧：

<span>test</span> | <span>appropriate style in this tag</span> | <span>test</span>

display:none 显示的结果:

test |   | test

visibility:hidden 显示的结果:

test |                        | test

opacity:0显示的结果:

test |                        | test