元素的显示与隐藏

css元素的显示与隐藏

如何让一个元素在页面中隐藏或者显示出来，主要有以下几种常见的方法。

1.display属性

• display:none; //隐藏元素
• display:block; //显示元素

注意：display隐藏元素后就不再占用位置

2.visibility可见性

• visibility:visible; //对象可视
• visibility:hidden; //对象隐藏

注意：visibility属性隐藏元素后，保留原来占有的位置

3.overflow溢出

当对象内容超过其指定高度及宽度时，不同属性值的效果。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出部分进行隐藏
scroll	总是显示滚动条
auto	超出自动显示滚动条，不超出则不显示

注意：一般都会把内容溢出的部分进行隐藏，避免溢出部分影响到整体的布局。
如果有使用定位的父元素，慎用 overflow:hidden；有的元素是故意超出的，使用这个属性超出部分会被隐藏，达不到所要的效果。

除此之外，还可以设置元素的透明度为0，效果跟visibility一样。

• opacity:0; //对象完全透明，不可见
• opacity:1; //对象完全显示