有以下三种方式来实现元素的隐藏：
① display: none; 不占据空间，更改该属性时会引起DOM树结构变化、页面重新布局——回流。
父元素被设置后已不在标准流中存在，自然不会被子元素继承。
无占位元素，原有的元素绑定的事件监听无效。
//元素显示：display: block;
------------------------------------------------------------------------------------------------------------------------------
② visibility: hidden; 元素隐藏、仍然占据空间。更改该属性时不会引起DOM树结构变化、不会引起页面重新布局，只会按照css代码重新渲染——重绘。
可以被子元素继承，可以通过设置visibility: visible;使得子元素显示。
元素无效、原有的元素绑定的事件监听无效。
//元素显示：visibility: visible;
------------------------------------------------------------------------------------------------------------------------------
③ opacity: 0; 元素隐藏、占空间。更改该属性时DOM树结构没有变化、不会引起页面重新布局，只可能会重新渲染——重绘。
可以被子元素继承，不可以通过设置opacity: 1;使得子元素显示。
元素不显示、原有的元素绑定的事件监听有效。
//元素显示：opacity: 1;