解說(shuō)W3C標準——overflow的屬性

我們知道，overflow屬性值有這幾種：

• visible：聲明內容不會(huì )被剪裁。比如內容可能被渲染到容器外面。
• hidden：聲明內容將被剪裁，并且也甭想使用滾動(dòng)條來(lái)查看剪裁掉的內容。
• scroll：聲明內容將被剪裁，但有可能出現滾動(dòng)條來(lái)查看被剪裁掉的內容。滾動(dòng)條出現的位置在inner border adge和outer padding adge之間。
• auto：聲明決策將依賴(lài)于客戶(hù)端，優(yōu)先使用scroll。

W3C標準中指明：
通常一個(gè)盒子的內容是被限制在盒子邊界之內的。但有時(shí)也會(huì )產(chǎn)生溢出，即部分或全部?jì)热菖艿胶凶舆吔缰?。溢出將在滿(mǎn)足下列條件之一時(shí)出現：
     1. 一個(gè)不換行的行元素寬度超出了容器盒子寬度。
     2. 一個(gè)子孫元素，由負邊距值引起的部分內容在盒子外部。
     3、 text-indent屬性引起的行內元素在盒子的左右邊界外。
    4. 一個(gè)元素的高度超出了容器盒子的高度。
    5. 一個(gè)寬度固定的塊元素放在了比它窄的容器盒子內。
    6. 一個(gè)絕對定位的子孫元素，部分內容在盒子外。但超出的部分不是總會(huì )被剪裁。子孫元素的內容就不會(huì )被子孫元素和其包含塊之間的祖先元素的overflow的設置所剪裁。

       當溢出發(fā)生時(shí)，overflow屬性約定了容器盒子是否剪裁掉超出其內邊界的部分，并且決定是否出現滾動(dòng)條來(lái)訪(fǎng)問(wèn)被剪裁掉的內容。它會(huì )影響到元素所有內容的剪裁，但有個(gè)例外情況，即上面第6條所提到的：元素的子孫元素的包含塊（Containing blocks）是整個(gè)視窗（viewport）或是該元素的祖先元素，內容將不會(huì )被剪裁。包含塊是什么呢？簡(jiǎn)單的說(shuō)，就是可以決定一個(gè)元素位置和大小的塊。通常一個(gè)元素的包含塊由離它最近的塊級祖先元素的內容邊界決定。但當元素被設置成絕對定位時(shí)，包含塊由最近的position不是static的祖先元素決定。


重慶網(wǎng)絡(luò )公司