天蠶在你身邊
不方便打電話?讓天蠶聯(lián)絡(luò)你
天蠶在你身邊
不方便打電話?讓天蠶聯(lián)絡(luò)你
解說W3C標(biāo)準(zhǔn)——overflow的屬性
我們知道,overflow屬性值有這幾種:
W3C標(biāo)準(zhǔn)中指明:
通常一個(gè)盒子的內(nèi)容是被限制在盒子邊界之內(nèi)的。但有時(shí)也會(huì)產(chǎn)生溢出,即部分或全部?jī)?nèi)容跑到盒子邊界之外。溢出將在滿足下列條件之一時(shí)出現(xiàn):
1. 一個(gè)不換行的行元素寬度超出了容器盒子寬度。
2. 一個(gè)子孫元素,由負(fù)邊距值引起的部分內(nèi)容在盒子外部。
3、 text-indent屬性引起的行內(nèi)元素在盒子的左右邊界外。
4. 一個(gè)元素的高度超出了容器盒子的高度。
5. 一個(gè)寬度固定的塊元素放在了比它窄的容器盒子內(nèi)。
6. 一個(gè)絕對(duì)定位的子孫元素,部分內(nèi)容在盒子外。但超出的部分不是總會(huì)被剪裁。子孫元素的內(nèi)容就不會(huì)被子孫元素和其包含塊之間的祖先元素的overflow的設(shè)置所剪裁。
當(dāng)溢出發(fā)生時(shí),overflow屬性約定了容器盒子是否剪裁掉超出其內(nèi)邊界的部分,并且決定是否出現(xiàn)滾動(dòng)條來訪問被剪裁掉的內(nèi)容。它會(huì)影響到元素所有內(nèi)容的剪裁,但有個(gè)例外情況,即上面第6條所提到的:元素的子孫元素的包含塊(Containing blocks)是整個(gè)視窗(viewport)或是該元素的祖先元素,內(nèi)容將不會(huì)被剪裁。包含塊是什么呢?簡(jiǎn)單的說,就是可以決定一個(gè)元素位置和大小的塊。通常一個(gè)元素的包含塊由離它最近的塊級(jí)祖先元素的內(nèi)容邊界決定。但當(dāng)元素被設(shè)置成絕對(duì)定位時(shí),包含塊由最近的position不是static的祖先元素決定。
重慶網(wǎng)絡(luò)公司
地址:重慶市渝中區(qū)上清寺鑫隆達(dá)B座28-8
郵編:400015
電話:023-63612462
EMAIL:cnjl_net@163.com