為什么需要深入學(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è)盒子（blockcontainerbox）的內(nèi)容（子元素、孫子元素等后裔）超過(guò)盒子本身的大小的時(shí)候，就會(huì)出現(xiàn)溢出。這個(gè)時(shí)候CSS屬性overflow決定如何處理溢出。這個(gè)css屬性大家都知道，在這里不討論了，在這里指出需要注意的幾點(diǎn)： overflow會(huì)影響所在元素的所有內(nèi)容的裁剪、滾動(dòng)，但是有一種情況例外："Itaffectstheclippingofalloftheelement'scontentexceptanydescendantelements(andtheirrespectivecontentanddescendants)whosecontainingblockistheviewportoranancestoroftheelement."也就是說(shuō)，overflow的所在元素必須是內(nèi)容元素的直接或間接containingblock，這時(shí)overflow屬性才會(huì)影響這個(gè)內(nèi)容元素。比如<B><C><C/><B/>，一般來(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)條騰出空間。 在<html>和<body>上的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'." 可以推斷出： 一般來(lái)說(shuō)只有元素才能擁有滾動(dòng)條（更準(zhǔn)確地說(shuō)，只有產(chǎn)生blockcontainerbox的元素才能擁有滾動(dòng)條）。但visualviewport是個(gè)例外。它雖然不是一個(gè)元素，但是也可以擁有滾動(dòng)條。如果在<html>和<body>上都沒(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)條。 <html>的最終overflow永遠(yuǎn)都是visible。也就是說(shuō)，<html>元素永遠(yuǎn)不可能擁有滾動(dòng)條。 如果你想要為<body>設(shè)置非visible的overflow，需要先為<html>設(shè)置一個(gè)非visible的值來(lái)冒泡，從而<body>的overflow不會(huì)被冒泡。 小練習(xí) 小練習(xí)：利用以上原理，使visualviewport和<body>都擁有橫、豎滾動(dòng)條，總共4個(gè)滾動(dòng)條。不能使用overflow:scroll（這樣就太簡(jiǎn)單了）。 步驟： 使visualviewport和<body>的最終overflow值都為auto，從而可以出現(xiàn)滾動(dòng)條。 觸發(fā)visualviewport和<body>的溢出。通過(guò)【為內(nèi)容設(shè)置一個(gè)更大的尺寸】來(lái)做到。 代碼+注釋?zhuān)?nbsp; <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=no"> <title>test</title> <style> *{ padding:0; margin:0; box-sizing:border-box; } html{ /*使html的尺寸始終與visualviewport相同（即使你縮放、調(diào)整瀏覽器窗口的大小），從而body可以設(shè)置一個(gè)比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)條。 當(dāng)然，你也可以通過(guò)很多其他的方式來(lái)觸發(fā)visualviewport的溢出，比如增大html元素，或者在body中弄一個(gè)position:absolute的p*/ width:110%; height:110%; border:15pxsolidgreen; } main{ /*main溢出body，使得body出現(xiàn)滾動(dòng)條*/ width:110%; height:110%; border:15pxsolidblue; } </style> </head> <body> <main> </main> </body> </html>
網(wǎng)站導(dǎo)航
- zblogPHP模板zbpkf
- zblog免費(fèi)模板zblogfree
- zblog模板學(xué)習(xí)zblogxuexi
- zblogPHP仿站zbpfang