CSS 元素的显示与隐藏

CSS中提供了一些可以使元素显示与隐藏的属性，分别是display、visibility、overflow和opacity。

1.display属性

display属性用于设置一个元素如何显示。

        ①display：none；隐藏对象

        ②display：block；除了转换为块级元素之外，同时还有显示元素的意思。

display隐藏元素后，不在占有原来的位置

2.visibility 可见性

visibility属性用于指定一个元素应可见还是隐藏。

        ①visibility：visible；元素可视

        ②visibility：hidden；元素隐藏

visibility隐藏元素后，继续占有原来的位置

3.overflow 溢出

overflow属性指定了如果内容溢出一个元素的框框时（超过了其指定高度及宽度），会发生什么。

        ①overflow：visible；不剪切内容也不添加滚动条

        ②overflow：hidden；不显示超出对象尺寸的内容，超出的部分隐藏掉。

        ③overflow：scroll；不管超出内容否，总是显示滚动条。

        ④overflow：auto；超出指定显示滚动条，不超出不显示滚动条。

一般情况下，不让溢出的内容显示，因为已出的部分会影响布局。

如果有定位的盒子，请慎用overflow：hidden因为它会隐藏多余的部分。

4.opacity 元素整体透明度

opacity属性让其元素整体（包括内容）一起透明。

用法：opacity：属性值；

属性值取值：0~1之间的数字， 1表示完全不透明，0表示完全透明。

opacity会让元素整体透明（包括内容、文字、子元素）