css3之元素的显示与隐藏

元素的显示与隐藏

让一个元素在页面中隐藏或者显示出来，类似网站广告，点关闭时消失，刷新页面后会重新出现。

1. display显示隐藏
2. visibility显示隐藏
3. overflow溢出显示隐藏

display属性

display属性设置一个元素应该如何显示。

display: none;				//隐藏对象
display: block;				//除了转换为块级元素以外，还有显示元素	的含义

display隐藏的元素不再占有原来的位置。

visibility属性

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

visibility: visible;			//元素可见
visibility: hidden;				//元素隐藏

visibility隐藏元素后，继续占有原来的位置。实际应用中display使用更多。

overflow属性

overflow属性指定元素框中的内容溢出范围时（超过指定高度和宽度）会发生什么。

overflow: visible | hidden | scroll | auto;

visible				//默认值，不剪切内容也不显示滚动条
hidden				//超出盒子尺寸的内容全部隐藏
scroll				//添加一个滚动条，能滚动显示超出的内容，不管有没有超出，都会显示滚动条
auto				//内容超出则显示滚动条，不超出则不显示

如果overflow属性的元素中有定位的盒子，则慎用overflow: hidden，因为定位的盒子也可能超出该元素范围，使用hidden后会将定位的盒子溢出部分隐藏。