网站制作学习网DIV+CSS→正文:css3.0学习 基础盒模型 Basic box model
字体:

css3.0学习 基础盒模型 Basic box model

DIV+CSS 2010/10/9 14:24:42  点击:不统计


第五节 基础盒模型 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究

·上一篇:css3.0学习用户界面 User-interface 3 >>    ·下一篇:css3.0学习 内容 Generated Content >>
推荐文章
最新文章