1、css溢出機(jī)制是什么？為什么需要深化學(xué)習(xí)css溢出機(jī)制？ 在實(shí)際開(kāi)發(fā)的過(guò)程中，內(nèi)容溢出是常常見(jiàn)到的。假如不深化了解這個(gè)機(jī)制，你常常會(huì)遇到這樣的問(wèn)題：為什么這個(gè)元素沒(méi)有受到祖先元素的overflow:hidden的影響？這里浮現(xiàn)的滾動(dòng)條是哪個(gè)元素的？假如消退這個(gè)滾動(dòng)條？如何在指定的元素上增強(qiáng)滾動(dòng)功能？ 在這篇文章，我們將會(huì)從css標(biāo)準(zhǔn)動(dòng)身，研究css溢出機(jī)制的詳情。 溢出 當(dāng)一個(gè)盒子（blockcontainerbox）的內(nèi)容（子元素、孫子元素等后裔）超過(guò)盒子本身的大小的時(shí)候，就會(huì)浮現(xiàn)溢出。這個(gè)時(shí)候css屬性overflow打算如何處理溢出。這個(gè)css屬性大家都知道，在這里不研究了，在這里指出需

2、要注重的幾點(diǎn)： overflow會(huì)影響所在元素的全部?jī)?nèi)容的裁剪、滾動(dòng)，但是有一種狀況例外："itaffectstheclippingofalloftheelement&39;scontentexceptanydescendantelements(andtheirrespectivecontentanddescendants)whosecontainingblockistheviewportoranancestoroftheelement."也就是說(shuō)，overflow的所在元素必需是內(nèi)容元素的挺直或間接containingblock，這時(shí)overflo

3、w屬性才會(huì)影響這個(gè)內(nèi)容元素。比如，普通來(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)生的containingblock的尺寸會(huì)削減，以便給滾動(dòng)條騰出空間。 在和上的overflow屬性存在冒泡現(xiàn)象:"uasmustapplythe&39;overflow&39;propertysetontherootelementtotheviewport.w

4、hentherootelementisanhtml"html"elementoranxhtml"html"element,andthatelementhasanhtml"body"elementoranxhtml"body"elementasachild,useragentsmustinsteadapplythe&39;overflow&39;propertyfromthefirstsuchchildelementtotheviewpo

5、rt,ifthevalueontherootelementis&39;visible&39;.the&39;visible&39;valuewhenusedfortheviewportmustbeinterpretedas&39;auto&39;.theelementfromwhichthevalueispropagatedmusthaveausedvaluefor&39;overflow&39;of&39;visible&39;." 可以判斷出： 普通來(lái)說(shuō)惟獨(dú)元素才干擁有滾動(dòng)條（更精確地說(shuō)，惟獨(dú)

6、產(chǎn)生blockcontainerbox的元素才干擁有滾動(dòng)條）。但visualviewport是個(gè)例外。它雖然不是一個(gè)元素，但是也可以擁有滾動(dòng)條。假如在和上都沒(méi)有設(shè)置overflow屬性而用法默認(rèn)值visible（大部分場(chǎng)景都是這樣），那么，visualviewport的overflow就是auto：當(dāng)網(wǎng)頁(yè)中有內(nèi)容超出visualviewport時(shí)，visualviewport上會(huì)浮現(xiàn)滾動(dòng)條。 的終于overflow永久都是visible。也就是說(shuō)，元素永久不行能擁有滾動(dòng)條。 假如你想要為設(shè)置非visible的overflow，需要先為設(shè)置一個(gè)非visible的值來(lái)冒泡，從而的overflow不

7、會(huì)被冒泡。 小練習(xí) 小練習(xí)：利用以上原理，使visualviewport和都擁有橫、豎滾動(dòng)條，總共4個(gè)滾動(dòng)條。不能用法overflow:scroll（這樣就太容易了）。 步驟： 使visualviewport和的終于overflow值都為auto，從而可以浮現(xiàn)滾動(dòng)條。 觸發(fā)visualviewport和的溢出。通過(guò)【為內(nèi)容設(shè)置一個(gè)更大的尺寸】來(lái)做到。 代碼+注釋： test * padding:0; margin:0; box-sizing:border-box; html /*使html的尺寸始終與visualviewport相同（即使你縮放、調(diào)節(jié)掃瞄器窗口的大小），從而body可以設(shè)置一個(gè)

8、比visualviewport還大的尺寸(110%)。 對(duì)于默認(rèn)為block的元素可以省略width:100%;*/ width:100%; height:100%; /*非visible的值冒泡到visualviewport上，使visualviewport可以浮現(xiàn)滾動(dòng)條*/ overflow:auto; border:15pxsolidred; body /*使得body可以浮現(xiàn)滾動(dòng)條*/ overflow:auto; /*body溢出html，從而溢出initialcontainningblock，從而溢出visualviewport，使得visualviewport浮現(xiàn)滾動(dòng)條。 固然，你也可以通過(guò)無(wú)數(shù)其他的方式來(lái)觸發(fā)visualviewport的溢出，比如增大html元素，或者在body中弄一個(gè)position:absolute的p*/ width:110%; heig