1、css溢出機制是什么？為什么需要深化學習css溢出機制？ 在實際開發的過程中，內容溢出是常常見到的。假如不深化了解這個機制，你常常會遇到這樣的問題：為什么這個元素沒有受到祖先元素的overflow:hidden的影響？這里浮現的滾動條是哪個元素的？假如消退這個滾動條？如何在指定的元素上增強滾動功能？ 在這篇文章，我們將會從css標準動身，研究css溢出機制的詳情。 溢出 當一個盒子（blockcontainerbox）的內容（子元素、孫子元素等后裔）超過盒子本身的大小的時候，就會浮現溢出。這個時候css屬性overflow打算如何處理溢出。這個css屬性大家都知道，在這里不研究了，在這里指出需

2、要注重的幾點： overflow會影響所在元素的全部內容的裁剪、滾動，但是有一種狀況例外："itaffectstheclippingofalloftheelement&39;scontentexceptanydescendantelements(andtheirrespectivecontentanddescendants)whosecontainingblockistheviewportoranancestoroftheelement."也就是說，overflow的所在元素必需是內容元素的挺直或間接containingblock，這時overflo

3、w屬性才會影響這個內容元素。比如，普通來說，b的overflow會影響c，但是假如c是相對于viewport或者a定位的（比如用法了position:absolute），那么c的顯示就不受b的裁剪、滾動的影響。 當需要滾動條的時候，滾動條會放在border與padding之間。父元素產生滾動條以后，它產生的containingblock的尺寸會削減，以便給滾動條騰出空間。 在和上的overflow屬性存在冒泡現象:"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;." 可以判斷出： 普通來說惟獨元素才干擁有滾動條（更精確地說，惟獨

6、產生blockcontainerbox的元素才干擁有滾動條）。但visualviewport是個例外。它雖然不是一個元素，但是也可以擁有滾動條。假如在和上都沒有設置overflow屬性而用法默認值visible（大部分場景都是這樣），那么，visualviewport的overflow就是auto：當網頁中有內容超出visualviewport時，visualviewport上會浮現滾動條。 的終于overflow永久都是visible。也就是說，元素永久不行能擁有滾動條。 假如你想要為設置非visible的overflow，需要先為設置一個非visible的值來冒泡，從而的overflow不

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

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