很多人在使用CSS时,对Display,Visibility和Overflow三个属性的理解并不是很清晰,这里就对这三个属性做一下分析,对应三个属性在使用时的区别.
Display
display用来设置或检索对象是否及如何显示。
display:nonedisplay属性为none时,隐藏标签对象。不会为对象保留其位置空间,它下面所在的元素会被自动上移占有被隐藏标签位置。
HTML代码:
divid=aA/divdivid=bB/divdivid=cC/div
CSS代码:
div{width:px;height:px;}#a{background-color:red;}#b{background-color:green;display:none;}#c{background-color:blue;}
效果如下:
display:blockdisplay属性为block时,默认有显示标签的意义,同时可以将标签转换为块元素显示,这时标签会独占一行,并且可以设置宽高属性。
HTML代码:
spanid=aA/spanspanid=bB/spanspanid=cC/span
CSS代码:
span{width:px;height:px;font-size:50px;color:gray;}#a{background-color:red;}#b{background-color:green;}#c{background-color:blue;display:block;}
效果如下:
display:inlinedisplay属性为inline时,指定对象为内联元素,此时对象的宽高属性不在有效,元素大小取决于实际内容大小。
HTML代码:
divid=aA/divdivid=bB/divdivid=cC/div
CSS代码:
div{width:px;height:px;font-size:50px;color:gray;display:inline;}#a{background-color:red;}#b{background-color:green;}#c{background-color:blue;}
效果如下:
Visibility
visibility属性用来设置或检索是否显示对象。与display属性不同，该属性为隐藏的对象保留其占据的物理空间,该属性默认值为visible,设置对象可见。
visibility:hiddenvisibility属性为hidden时,隐藏标签对象。但该对象所占用的位置空间会被保留。
HTML代码:
divid=aA/divdivid=bB/divdivid=cC/div
CSS代码:
div{width:px;height:px;font-size:50px;color:gray;}#a{background-color:red;}#b{background-color:green;visibility:hidden;}#c{background-color:blue;}
效果如下:
Overflow
overflow属性用来检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
overflow:visibleoverflow默认值为visible,作用是按实际效果显示,不剪切超出范围的内容。
HTML代码:
divid=adivid=b/div/div
CSS代码:
#a{width:px;height:px;background-color:red;overflow:visible;}#b{width:px;height:px;background-color:blue;}
效果如下:
overflow:hiddenoverflow值为hidden时,会将超出对象尺寸的内容进行裁剪，将不出现滚动条。
HTML代码:
divid=adivid=b/div/div
CSS代码:
#a{width:px;height:px;background-color:red;overflow:hidden;}#b{width:px;height:px;background-color:blue;}
效果如下:
overflow:scrolloverflow值为scroll,作用是将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。
HTML代码:
divid=adivid=b/div/div
CSS代码:
#a{width:px;height:px;background-color:red;overflow:scroll;}#b{width:px;height:px;background-color:blue;}
效果如下:
overflow:autooverflow值为auto时,作用是在需要时剪切内容并添加滚动条，该值为body对象和textarea的默认值。
HTML代码:
divid=adivid=b/div/div
CSS代码:
#a{width:px;height:px;background-color:red;overflow:auto;}#b{width:px;height:px;background-color:blue;}
效果如下:
总结:
display和visibility属性都是用来设置或检索对象是否及如何显示。使用diplay隐藏对象时,在文档流中不占空间.后续对象会占据隐藏对象位置。使用visibility隐藏对象时,在文档流中会保留隐藏对象所占用的空间。overflow主要用来检索或设置当对象的内容超过其指定高度及宽度时如何管理内容显示。