控制元素的显示与隐藏

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）效果。