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所示。