css3.0学习 基础盒模型 Basic box model
第五节 基础盒模型 Basic box model
1.overflow
语法:
overflow:visible|auto|hidden|scroll
相关属性:overflow-x,overflow-y
取值:
visible:不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame得大小。并且clip属性设置将失效
auto:此为body对象的textarea的默认值。在需要时剪切内容并添加滚动条
hidden:不显示超过对象尺寸的内容
scroll:总是显式滚动条
说明:
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
设置textarea对象为hidden值将隐藏其滚动条。
对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。
自IE5开始,此属性在MAC平台上可用。 原载于:forasp.cn
兼容性:
IE6,IE7,IE8,Firefox2.0,Firefox3.0,Firefox3.5,chrome1.0,chrome2.0,opera9.63,Safari3.1,Safari4支持
代码示例:
<style type="text/css">
.test_demo {overflow: scroll; height: 120px; width: 120px; background:#CCCCCC;}
</style>
<div class="test_demo">
总是显示滚动条
</div>
2.overflow-x
语法:
overflow-x:visible|auto|hidden|scroll
相关属性:overflow,overflow-y
取值:
visible:不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame得大小。并且clip属性设置将失效
auto:此为body对象的textarea的默认值。在需要时剪切内容并添加滚动条
hidden:不显示超过对象尺寸的内容
scroll:横向显式滚动条
说明:
检索或设置当对象的内容超过其指定宽度时如何管理内容 原载于:forasp.cn
兼容性:
IE6,IE7,IE8,Firefox2.0,Firefox3.0,Firefox3.5,chrome1.0,chrome2.0,opera9.63,Safari3.1,Safari4支持
代码示例:
<style type="text/css">
.test_demo {overflow-x: scroll; height: 120px; width: 120px; background:#CCCCCC;}
</style>
<div class="test_demo">
横向显示滚动条
</div>
3.overflow-y
语法:
overflow-y:visible|auto|hidden|scroll
相关属性:overflow,overflow-x
取值:
visible:不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame得大小。并且clip属性设置将失效
auto:此为body对象的textarea的默认值。在需要时剪切内容并添加滚动条
hidden:不显示超过对象尺寸的内容
scroll:纵向显式滚动条
说明:
检索或设置当对象的内容超过其指定高度时如何管理内容 原载于:forasp.cn
兼容性:
IE6,IE7,IE8,Firefox2.0,Firefox3.0,Firefox3.5,chrome1.0,chrome2.0,opera9.63,Safari3.1,Safari4支持
代码示例:
<style type="text/css">
.test_demo {overflow-y: scroll; height: 120px; width: 120px; background:#CCCCCC;}
</style>
<div class="test_demo">
纵向显示滚动条
</div>
转www.载for网站制作学习asp必.cn究