3.5 盒子模型的控制属性

CSS 3中新增了3种盒子模型的控制属性，分别是overflow、overflow-x和overflow-y，下面分别对这3种新增的盒子模型控制属性进行简单的介绍。

3.5.1 overflow

overflow用于设置当对象的内容超过其指定的高度及宽度时应该如何进行处理。其定义的语法如下：

其相关属性有：

· visible：不剪切内容也不添加滚动条。如果显示声明该默认值，对象将被剪切为包含对象的window或frame的大小，并且clip属性设置将失效。

· auto：该属性值为body标签和textarea标签的默认值，在需要时剪切内容并添加滚动条。

· hidden：不显示超过对象尺寸的内容。

· scroll：总是显示滚动条。

提示

设置textarea标签的值为hidden可以隐藏其滚动条。对于table来说，如果将table-layout的属性值设置为fixed，则td对象支持带有默认值为hidden的overflow属性。overflow的属性值如果设置为hidden、scroll或者auto，那么超出td对象尺寸的内容将被剪切；如果设置为visible，则额外的文本将溢出到右边或左边（视direction属性设置而定）的单元格。

技能案例：显示滚动条

源文件：源文件\第3章\3-5-1.html

（1）新建一个HTML文档，在代码页面输入如下的代码：

（2）在IE浏览器中的预览效果如图3-22所示。

3.5.2 overflow-x

overflow-x用于设置当对象的内容超过其指定的宽度时应该如何进行处理。其定义的语法如下：

overflow-x的用法和兼容性与overflow的用法和兼容性完全相同。

技能案例：显示横向滚动条

源文件：源文件\第3章\3-5-2.html

（1）新建一个HTML文档，在代码页面输入如下的代码：

（2）在IE浏览器中预览该页面，可以看到元素显示的是横向滚动条，如图3-23所示。

3.5.3 overflow-y

overflow-y用于设置当对象的内容超过其指定的高度时应该如何进行处理。其定义的语法如下：

overflow-y的用法和兼容性与overflow的用法和兼容性完全相同。

技能案例：显示竖向滚动条

源文件：源文件\第3章\3-5-3.html

（1）新建一个HTML文档，在代码页面输入如下的代码：

（2）在IE浏览器中预览该页面，可以看到元素显示的是竖向滚动条，如图3-24所示。