CSS中提供了一些可以使元素显示与隐藏的属性，分别是display、visibility和opacity。
1.display
display属性用于设置一个元素如何显示。
- display：none; 将 display 设置为 none 会将元素从渲染树中移除。这会导致该元素及其所有子代元素不再被屏幕阅读技术所访问，自然也不在占有原来的位置。
- display：block; 转换为块级元素，元素自然会显示。
2.visibility
visibility属性用于指定一个元素的可见性。该属性还可以隐藏 <table> 中的行或列。
- visibility：visible; 元素正常显示。
- visibility：hidden; 隐藏元素，但是其他元素的布局不改变，可以看做此元素变成透明。要注意若将其子元素设为
visibility: visible，则该子元素依然可见。
3.opacity
opacity属性用于设置该元素整体（包括内容）的透明度。取值：0~1之间的数字， 1表示完全不透明，0表示完全透明。
三者的区别
- display: none - 不占空间，不能触发事件，会引起回流，子元素不影响，过渡（transition）效果无效。
- visibility: hidden - 占据空间，不能触发事件，引起重绘，子元素可设置 visible进行显示，可以用过渡（transition）效果。
- opacity: 0 - 占据空间，会触发事件，引起重绘，子元素不影响，可以用过渡（transition）效果。