CSS ' pārplūde Īpašums tiek izmantots, lai kontrolētu atlasītā HTML elementa satura pārplūdi. Saturu var kontrolēt vienā noteiktā virzienā, izmantojot “ pārpilde-y ' un ' pārplūde-x ” īpašības. Īpašums “pārpilde” pieņem tādas vērtības kā “ ritiniet ”, “ redzams ”, “ paslēptas ' un ' auto ” un to funkcionalitāte atšķiras viena no otras. Tomēr šajā rokasgrāmatā ir parādīta atšķirība starp overflow:scroll un overflow:auto, izmantojot praktiskus piemērus.
Kā overflow:scroll atšķiras no overflow:auto?
Galvenā atšķirība starp ' ritiniet ' un ' auto ' vērtības ir tas, ka ' pārpilde: ritiniet ” vienmēr parāda ritjoslu neatkarīgi no tā, vai tā ir vajadzīga vai nav, kas rada vizuālu uzmanību. No otras puses, “ pārpilde: auto ” parāda ritjoslu tikai tad, ja saturs ir pārpildīts. Tādā veidā var izveidot tīrāku un racionālāku dizainu, kas viegli piesaista lietotāja uzmanību.
1. piemērs. Pārpildes:scroll Property izmantošana
CSS ' pārpilde: ritiniet ” rekvizīts pēc noklusējuma iestata ritjoslu, lai kontrolētu pārpildīto saturu. Tas neredz pārpildes saturu un pēc tam izmanto ritjoslu. Tā vietā pēc koda apkopošanas tiek parādīta horizontāla un vertikāla ritjosla, bet lietotājs var modificēt un parādīt tikai sānu ritjoslu atbilstoši dizaina prasībām.
Apmeklējiet tālāk norādīto kodu, lai izmantotu rekvizītu “overflow:scroll”.
< div >
< h3 > Piemērs priekš Pārpilde: ritiniet h3 >
< div klasē = 'scrollingBox scroll' >
< lpp > Tas ir izmantots tikai fiktīvs saturs priekš demonstrācija par atšķirību starp pārpildes y īpašuma vērtības ritināšanu un automātisko.
lpp >
div >
div >
Iepriekš minētajā koda blokā:
- Pirmkārt, sakne ' div 'elements ir izveidots un izmanto ligzdoto ' ” tagu tajā.
- Pēc tam piešķiriet klases ' scrollingBox ' un ' ritiniet uz jau izveidoto ligzdoto
” tagu.- Visbeidzot norādiet fiktīvus datus ' ' un ' ' atzīmes iekšpusē ' div ” elementi.
Pēc HTML struktūras izveides izmantojiet CSS pārpildes rekvizītu:
< stils >
.scrollingBox {
platums: 300 pikseļi;
augstums: 150 pikseļi;
apmale: 1 px cieta tumši pelēka;
}
.ritiniet {
pārplūde: ritināt;
}
stils >Iepriekš minētā CSS koda apraksts:
- Vispirms atlasiet “ scrollingBox ” klasē un norādiet vērtības “ 300 pikseļi ”, “ 150 pikseļi ' un ' 1 pikselis vienkrāsains tumši pelēks 'uz CSS' platums ”, “ augstums ', un ' robeža ” īpašības. Šīs īpašības tiek izmantotas labākam vizualizācijas procesam.
- Tālāk “ ritiniet ' ir atlasīta klase, un vērtība ' ritiniet 'tiek nodots CSS' pārplūde ” īpašums.
Pēc apkopošanas posma beigām:
Iepriekš redzamā izvade parāda, ka saturs nav pārpildīts, bet ritjosla ir pievienota gan X, gan Y asij.
2. piemērs. Pārpildes:auto Property izmantošana
Rekvizīts overflow:auto ir līdzīgs overflow:scroll, jo abi var parādīt ritjoslu. Vienīgā atšķirība ir tā, ka “ pārpilde: auto ” pievieno ritjoslu, kad saturs ir pārpildīts, un, ja saturs nav pārpildīts, ritjosla netiek pievienota. To pārsvarā izmanto, veidojot responsīvu tīmekļa dizainu tā dinamiski mainīgā rakstura dēļ.
Piemēram, apmeklējiet tālāk norādīto kodu:
< div klasē = 'automātiskais piemērs' >
< h3 > Piemērs priekš Pārplūde: auto h3 >
< div klasē = 'scrollingBox' stils = 'pārplūde: auto' >
< lpp > Tas ir izmantots tikai fiktīvs saturs priekš demonstrācija par atšķirību starp pārpildes y īpašuma vērtības ritināšanu un automātisko.
lpp >
div >
div >Iepriekš minētajā koda blokā:
- Pirmkārt, tiek izmantota tā pati HTML struktūra un fiktīvie dati tiek nodrošināti “ h3 ', un ' lpp ” elementi tiek mainīti.
- Tālāk “ stils 'atribūts tiek izmantots ar iekšējo ligzdotu' div ' elementu un iestata vērtību ' auto 'uz CSS' pārplūde ” īpašums.
Pēc izpildes ' div ”elements tagad izskatās šādi:
Iepriekš redzamajā momentuzņēmumā redzams, ka ritjosla netiek pievienota atbilstoši satura garumam.
Tagad tikai nedaudz vairāk informācijas par ' pārpilde: auto ” īpašums. Mēģiniet nodrošināt lielu datu apjomu ligzdotajam ' div ” elements. Pēc koda atjaunināšanas tīmekļa lapa izskatās šādi:
Izvade apstiprina, ka ritjosla tagad ir pievienota pārpildes satura dēļ.
Secinājums
' pārpilde: ritiniet ' un ' pārpilde: auto ” rekvizīti atšķiras situācijā, kad tie pievieno ritjoslu. “Pārplūde: ritināšana” vienmēr parāda ritjoslu neatkarīgi no tā, vai saturs ir pārpildīts vai nē. Lai gan “overflow:auto” ritjosla tiek rādīta tikai tad, ja atlasītā HTML elementa saturs ir pārpildīts. CSS vērtība ' pārplūde ” īpašums ir atkarīgs no konkrētā dizaina un lietotāja pieredzes prasībām. Šajā rakstā ir parādīta atšķirība starp rekvizītiem “overflow:scroll” un “overflow:auto”.
- Pēc tam piešķiriet klases ' scrollingBox ' un ' ritiniet uz jau izveidoto ligzdoto