display:none：隐藏元素，不占位
visibility： 隐藏元素，占位
opacity：隐藏元素，占位

display

属性规定元素应该生成的框的类型。
值类型：
1.none 此元素不会被显示。
2.block 此元素将显示为块级元素，此元素前后会带有换行符。
3.inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
4.inline-block 行内块元素

事件监听：无法进行DOM事件监听
transform：transition 不支持display

visibility

规定元素是否可见。
提示：即使不可见的元素也会占据页面上的空间。
值：
1.visible 默认值。元素是可见的。
2.hidden 元素是不可见的。
3.collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
4.inherit 规定应该从父元素继承 visibility 属性的值。

事件监听：无法进行DOM事件监听
transform：visibility会立即显示，隐藏式会延时
继承：会被子元素继承，子元素可以通过设置visibility:visible来取消隐藏

opacity

值为0时，元素不可见
事件监听：可以进行DOM事件监听
transform：transition可以延时显示和隐藏
继承：会被子元素继承，且子元素并不能通过opacity:1来取消隐藏