如果一個(gè)元素的內(nèi)容對(duì)于元素大小來(lái)說(shuō)過(guò)大，就有可能溢出元素本身。對(duì)于這種情況，網(wǎng)頁(yè)設(shè)計(jì)人員有一些候選解決辦法，網(wǎng)站建設(shè)CSS2允許你從中選擇。它還允許定義一個(gè)剪裁區(qū)域，如果出了這個(gè)剪裁區(qū)域，這種溢出就會(huì)帶來(lái)問(wèn)題。

溢出

假設(shè)出于某種原因，網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)元素固定為某個(gè)特定大小，但內(nèi)容在元素中放不下。此時(shí)就可以利用overflow屬性控制這種情況。

overflow

值：visible | hidden | scroll | auto | inherit

初始值：visible

應(yīng)用于：塊級(jí)元素和替換元素

繼承性：無(wú)

計(jì)算值：根據(jù)指定確定

默認(rèn)值visible表明，網(wǎng)頁(yè)設(shè)計(jì)元素的內(nèi)容在元素框之外也可見(jiàn)。一般地，這會(huì)導(dǎo)致內(nèi)容超出其自己的元素框，但不會(huì)改變框的形狀。以下標(biāo)記會(huì)得到如圖10-31所示的結(jié)果：div#sidebar {position: absolute; top: 0; left: 0; width: 25%; height: 7em; background:#bbb; overflow: visible;}

如果overflow設(shè)置為scroll，元素的內(nèi)容會(huì)在元素框的邊界處剪裁——也就是說(shuō)，溢出的部分將無(wú)法看到，不過(guò)還是有辦法讓用戶(hù)得到這些額外的內(nèi)容。在Web瀏覽器中，這可能意味著使用一個(gè)滾動(dòng)條（或類(lèi)似的東西）或者使用另外某種方法訪(fǎng)問(wèn)內(nèi)容而不會(huì)改變?cè)乇旧淼男螤?。圖10-32所示就是一種可能的情況，這是由以下標(biāo)記得到的：

div#sidebar {position: absolute: top: 0; left: 0; width: 15%; height: 7em; overflow: scroll;}

如果使用scroll，應(yīng)該始終提供某種滾動(dòng)機(jī)制（例如滾動(dòng)條）。援引規(guī)范中的說(shuō)法，“這會(huì)避免動(dòng)態(tài)環(huán)境中滾動(dòng)條出現(xiàn)或消失所帶來(lái)的問(wèn)題”。因此，即使元素有足夠的空間顯示所有內(nèi)容，也應(yīng)當(dāng)顯示滾動(dòng)條。另外，打印一個(gè)頁(yè)面或在打印媒體中顯示文檔時(shí)，內(nèi)容可能顯示為就好像overflow值聲明為visible —樣。

如果overflow被設(shè)置為hidden，元素的內(nèi)容會(huì)在元素框的邊界處剪裁，不過(guò)不會(huì)提供滾動(dòng)接口使用戶(hù)訪(fǎng)問(wèn)超出剪裁區(qū)域的內(nèi)容?？紤]以下標(biāo)記：

div#sidebar {position: absolute; top: 0; left: 0; width: 15%; height: 7em; overflow: hidden;}

在這種情況下，被剪裁的內(nèi)容對(duì)用戶(hù)來(lái)說(shuō)不可用。這會(huì)得到如圖10-33所示的結(jié)果。

圖10-33：在內(nèi)容區(qū)邊界處剪裁內(nèi)容

最后還有一個(gè)值overflow: auto。這允許用戶(hù)代理來(lái)確定采用何種行為，不過(guò)都網(wǎng)頁(yè)設(shè)計(jì)人員建議在必要時(shí)提供一個(gè)滾動(dòng)機(jī)制。這可能是overflow的一個(gè)有用的用法，因?yàn)橛脩?hù)代理可以把它解釋為“只在必要時(shí)提供滾動(dòng)條”（也可能有些用戶(hù)代理不這樣解釋?zhuān)贿^(guò)一般來(lái)講，用戶(hù)代理當(dāng)然可以而且往往應(yīng)當(dāng)這樣解釋?zhuān)?/p>