為什么需要深入學(xué)習(xí)CSS溢出機(jī)制？
在實(shí)際開(kāi)發(fā)的過(guò)程中，內(nèi)容溢出是經(jīng)常見(jiàn)到的。如果不深入了解這個(gè)機(jī)制，你經(jīng)常會(huì)碰到這樣的問(wèn)題：為什么這個(gè)元素沒(méi)有受到祖先元素的overflow:hidden的影響？這里出現(xiàn)的滾動(dòng)條是哪個(gè)元素的？如果消除這個(gè)滾動(dòng)條？如何在指定的元素上增加滾動(dòng)功能？
在這篇文章，我們將會(huì)從CSS標(biāo)準(zhǔn)出發(fā)，討論CSS溢出機(jī)制的細(xì)節(jié)。
溢出
當(dāng)一個(gè)盒子（block container box）的內(nèi)容（子元素、孫子元素等后裔）超過(guò)盒子本身的大小的時(shí)候，就會(huì)出現(xiàn)溢出。這個(gè)時(shí)候CSS屬性overflow決定如何處理溢出。這個(gè)css屬性大家都知道，在這里不討論了，在這里指出需要注意的幾點(diǎn)：
overflow會(huì)影響所在元素的所有內(nèi)容的裁剪、滾動(dòng)，但是有一種情況例外："It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element." 也就是說(shuō)，overflow的所在元素必須是內(nèi)容元素的直接或間接containing block，這時(shí)overflow屬性才會(huì)影響這個(gè)內(nèi)容元素。比如<A><B><C><C/><B/><A/>，一般來(lái)說(shuō)，B的overflow會(huì)影響C，但是如果C是相對(duì)于viewport或者A定位的（比如使用了position:absolute），那么C的顯示就不受B的裁剪、滾動(dòng)的影響。
當(dāng)需要滾動(dòng)條的時(shí)候，滾動(dòng)條會(huì)放在border與padding之間。父元素產(chǎn)生滾動(dòng)條以后，它產(chǎn)生的containing block的尺寸會(huì)減少，以便給滾動(dòng)條騰出空間。
在<html>和<body>上的overflow屬性存在冒泡現(xiàn)象: "UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'. "
可以推斷出：
一般來(lái)說(shuō)只有元素才能擁有滾動(dòng)條（更準(zhǔn)確地說(shuō)，只有產(chǎn)生block container box的元素才能擁有滾動(dòng)條）。但visual viewport是個(gè)例外。它雖然不是一個(gè)元素，但是也可以擁有滾動(dòng)條。如果在<html>和<body>上都沒(méi)有設(shè)置overflow屬性而使用默認(rèn)值visible（大部分場(chǎng)景都是這樣），那么，visual viewport的overflow就是auto：當(dāng)網(wǎng)頁(yè)中有內(nèi)容超出visual viewport時(shí)，visual viewport上會(huì)出現(xiàn)滾動(dòng)條。
<html>的最終overflow永遠(yuǎn)都是visible。也就是說(shuō)，<html>元素永遠(yuǎn)不可能擁有滾動(dòng)條。
新聞熱點(diǎn)
疑難解答
圖片精選
