Šajā rakstā ar daudziem piemēriem ir parādīta CSS pārpildes rekvizīta izmantošana.
Kā izmantot Overflow-y īpašumu CSS?
CSS ' pārpilde-y ” rekvizīts tiek izmantots, lai kontrolētu satura pārpildīšanu pa šķērsasi elementā. Tas norāda, vai izgriezt saturu vai pievienot ritjoslu, ja saturs pārsniedz konteinera augstumu. Šī īpašuma iespējamās vērtības ir “ redzams ”, “ paslēptas ”, “ ritiniet ', un ' auto ”.
Apskatīsim tālāk sniegtos piemērus, lai labāk demonstrētu pārplūdes y rekvizītu:
1. piemērs: Visible izmantošana kā pārpildes y īpašuma vērtība
' redzams ” vērtība ļauj saturam pārplūst no konteinera un nepievieno nekādas izgriezuma vai ritjoslas. Apmeklējiet tālāk esošo praktisko kodu bloku:
>
>
>
Iepriekš minētā koda bloka apraksts:
- Vispirms piešķiriet vērtību ' vecāks 'uz ' klasē ' atribūtu un izmantojiet ' stils ” atribūts.
- Turklāt norādiet vērtību “ redzams 'uz CSS' pārpilde-y ” īpašums. Un iestatiet to vienādu ar ' stils ” atribūtu, lai CSS stils darbotos.
- Pēc tam izveidojiet ligzdotu ' div ' elementu un piešķiriet tam klasi ' bērnsSaturs ”. Sniedziet tam arī fiktīvus datus.
Tagad izmantojiet CSS rekvizītus, lai uzlabotu vizualizāciju, kas palīdz labāk izprast CSS pārpildes rekvizītu:
.vecāks {platums : 200 pikseļi ;
augstums : 150 pikseļi ;
robeža : 1 pikselis ciets melns ;
}
.childContent {
augstums : 300 pikseļi ;
fona krāsa : gaiši zils ;
}
CSS rekvizītu apraksts ir sniegts zemāk:
- Pirmkārt, ' vecāks ' ir atlasīta klase un vērtības ' 200 pikseļi ”, “ 150 pikseļi ', un ' 1 px viendabīgi melns 'ir piešķirti CSS' platums ”, “ augstums ', un ' robeža ” īpašības, attiecīgi.
- Pēc tam atlasiet “ bērnsSaturs ' klase un iestatiet vērtības ' 300 pikseļi ' un ' gaiši zils 'uz CSS' augstums ' un ' fona krāsa ” īpašības, attiecīgi. Šī klase ir paplašināta līdz “ vecāks 'klase, kuru kontrolē CSS' pārplūde ” īpašums.
Pēc koda fragmentu apkopošanas tīmekļa lapa izskatās šādi:
Momentuzņēmums parāda, ka pārpildes saturs tagad ir redzams, un ritjosla vai izgriezums nav pievienots pēc noklusējuma.
2. piemērs. Slēptās funkcijas izmantošana pārpildes y īpašuma vērtībai
' pārpilde-y ' īpašums ar vērtību ' paslēptas ” slēpj visu saturu, kas tiek pārvietots ārpus tā vecākkonteinera. Šis rekvizīts nepievieno ritjoslas, tā vietā tiek izgriezts pārpildītais saturs:
>
>
Iepriekš minētajā koda fragmentā ir:
- Pirmkārt, tas pats kods tiek ievietots vēlreiz, palielinot fiktīvo saturu, kas ievietots iekšējā div elementā.
- Pēc tam mainiet vērtību pārpilde-y ' īpašums uz ' paslēptas 'uz' ' atzīme, kuras klase ir ' vecāks ”.
Pēc atkārtotas atveidošanas tīmekļa lapa izskatās šādi:
Momentuzņēmums parāda, ka pārpildes saturs ir apgriezts.
3. piemērs. Ritināšanas izmantošana kā pārpildes y rekvizīta vērtība
'Vērtības iestatīšana pārpilde-y ' īpašums ' ritiniet ” ļauj galalietotājam ritināt
saturs, kas to pārpilda. Apmeklēsim tālāk norādīto koda bloku:
= 'vecāks' stils = 'overflow-y: ritiniet;' >
= 'bērna saturs' > Tas ir tikai manekens saturu izmanto, lai demonstrētu pārplūdes y rekvizītu, ja tas ir iestatīts kā redzams. Tas ir tikai manekens saturu izmanto, lai demonstrētu pārplūdes y rekvizītu, ja tas ir iestatīts kā redzams.
>
>Iepriekš minētajā koda blokā:
- Pirmkārt, tā pati HTML struktūra ir ievietota ' ” tagu.
- Pēc tam mainiet vērtību pārpilde-y ' īpašums ' ritiniet ”. Tas ļauj ' vecāks ” div, lai iespējotu ritināšanas efektu, lai kontrolētu pārpildīto saturu.
Pēc iepriekš minētā koda bloka apkopošanas tīmekļa lapa izskatās šādi:
Iepriekš redzamais gids parāda, ka ir pieejams ritināšanas efekts, lai kontrolētu pārpildīto saturu.
4. piemērs: Automātiskā izmantošana kā pārplūdes y rekvizīta vērtība
Šajā piemērā lietotāji var pievienot ritjoslu tikai tad, ja saturs neietilpst konteinerā. Turklāt, ja saturs nepārplūst, ritjosla netiks pievienota. Tas ir iespējams, sniedzot vērtību “ auto 'uz CSS' pārpilde-y ” īpašums:
= 'vecāks' stils = 'overflow-y: auto;' >
= 'bērna saturs' > Tas ir tikai manekens saturu izmanto, lai demonstrētu pārplūdes y rekvizītu, ja tas ir iestatīts kā redzams. Tas ir tikai manekens saturu izmanto, lai demonstrētu pārplūdes y rekvizītu, ja tas ir iestatīts kā redzams.
>
>Iepriekš minētajā koda blokā:
- Vispirms ievietojiet to pašu HTML failu “ ” tagu.
- Pēc tam atjauniniet ' vērtību pārpilde-y ' īpašums uz ' auto ”. Tas nodrošina ritināšanas efektu attiecībā pret satura vertikālo garumu.
Pēc kompilācijas procesa beigām tīmekļa lapa darbojas šādi:
Iepriekš redzamajā gif attēlā tiek rādīts pārpildes rekvizīts, kas ir iespējojis ritjoslu atbilstoši satura garumam.
Secinājums
CSS ' pārpilde-y ” rekvizīts tiek izmantots, lai kontrolētu pārpildīto saturu gar elementa šķērsasi. Pārplūdes y rekvizīts kontrolē saturu atbilstoši pārpildes y rekvizītiem noteiktajai vērtībai. ' vizuāli ' vērtība parāda pārpildīto saturu, ' paslēptas ' vērtība slēpj pārpildes saturu, bet ' ritiniet ” vērtība pievieno ritjoslu, lai kontrolētu saturu. Un ja vērtība ir “ auto ” ritjosla tiek pievienota vai noņemta atkarībā no satura garuma.