今天小編給大家分享一下css溢出機(jī)制怎么使用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)離石,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

    溢出

    當(dāng)一個(gè)盒子（blockcontainerbox）的內(nèi)容（子元素、孫子元素等后裔）超過盒子本身的大小的時(shí)候，就會(huì)出現(xiàn)溢出。這個(gè)時(shí)候CSS屬性overflow決定如何處理溢出。這個(gè)css屬性大家都知道，在這里不討論了，在這里指出需要注意的幾點(diǎn)：

    overflow會(huì)影響所在元素的所有內(nèi)容的裁剪、滾動(dòng)，但是有一種情況例外："Itaffectstheclippingofalloftheelement'scontentexceptanydescendantelements(andtheirrespectivecontentanddescendants)whosecontainingblockistheviewportoranancestoroftheelement."也就是說，overflow的所在元素必須是內(nèi)容元素的直接或間接containingblock，這時(shí)overflow屬性才會(huì)影響這個(gè)內(nèi)容元素。比如，一般來說，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'overflow'propertysetontherootelementtotheviewport.WhentherootelementisanHTML"HTML"elementoranXHTML"html"element,andthatelementhasanHTML"BODY"elementoranXHTML"body"elementasachild,useragentsmustinsteadapplythe'overflow'propertyfromthefirstsuchchildelementtotheviewport,ifthevalueontherootelementis'visible'.The'visible'valuewhenusedfortheviewportmustbeinterpretedas'auto'.Theelementfromwhichthevalueispropagatedmusthaveausedvaluefor'overflow'of'visible'."

    可以推斷出：

    一般來說只有元素才能擁有滾動(dòng)條（更準(zhǔn)確地說，只有產(chǎn)生blockcontainerbox的元素才能擁有滾動(dòng)條）。但visualviewport是個(gè)例外。它雖然不是一個(gè)元素，但是也可以擁有滾動(dòng)條。如果在和上都沒有設(shè)置overflow屬性而使用默認(rèn)值visible（大部分場景都是這樣），那么，visualviewport的overflow就是auto：當(dāng)網(wǎng)頁中有內(nèi)容超出visualviewport時(shí)，visualviewport上會(huì)出現(xiàn)滾動(dòng)條。

    的最終overflow永遠(yuǎn)都是visible。也就是說，元素永遠(yuǎn)不可能擁有滾動(dòng)條。

    如果你想要為設(shè)置非visible的overflow，需要先為設(shè)置一個(gè)非visible的值來冒泡，從而的overflow不會(huì)被冒泡。

    小練習(xí)

    小練習(xí)：利用以上原理，使visualviewport和都擁有橫、豎滾動(dòng)條，總共4個(gè)滾動(dòng)條。不能使用overflow:scroll（這樣就太簡單了）。

    步驟：

    使visualviewport和的最終overflow值都為auto，從而可以出現(xiàn)滾動(dòng)條。

    觸發(fā)visualviewport和的溢出。通過【為內(nèi)容設(shè)置一個(gè)更大的尺寸】來做到。

    代碼+注釋：

   

以上就是“css溢出機(jī)制怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。