Denne artikel demonstrerer brugen af CSS overflow-y-egenskaben med adskillige eksempler.
Hvordan bruger man Overflow-y Property i CSS?
CSS ' overløb-y ” egenskaben bruges til at kontrollere overfyldningen af indholdet langs krydsaksen i et element. Det angiver, om indholdet skal klippes eller tilføjes en rullepanel, når indholdet overstiger beholderens højde. De mulige værdier for denne ejendom er ' synlig ', ' skjult ', ' rulle ', og ' auto ”.
Lad os besøge nedenstående eksempler for en bedre demonstration af overløbsegenskaben:
Eksempel 1: Brug af Visible som en værdi for Overflow-y-egenskab
Det ' synlig ”-værdien tillader indholdet at flyde over fra beholderen og tilføjer ikke nogen udklipnings- eller rullebjælker. Besøg nedenstående praktiske kodeblok:
>
>
>
Beskrivelsen af ovenstående kodeblok:
- Først skal du tildele værdien ' forælder ' til ' klasse ' attribut og bruge ' stil ' attribut.
- Angiv desuden værdien af ' synlig ' til CSS ' overløb-y ” ejendom. Og sæt den lig med ' stil ”-attribut for at få CSS-stylingen til at fungere.
- Opret derefter en indlejret ' div ' element og tildel det en klasse af ' barnindhold ”. Giv også dummy-data til det.
Brug nu CSS-egenskaberne til at forbedre visualiseringen, hvilket hjælper med en bedre forståelse af CSS-overløb-y-egenskaben:
.forælder {bredde : 200 px ;
højde : 150 px ;
grænse : 1 px solid sort ;
}
.childContent {
højde : 300 px ;
baggrundsfarve : lyseblå ;
}
Beskrivelsen af CSS-egenskaber er givet nedenfor:
- For det første ' forælder ' klasse er valgt, og værdierne for ' 200 px ', ' 150 px ', og ' 1px ensfarvet sort ' er tildelt CSS ' bredde ', ' højde ', og ' grænse ” ejendomme, hhv.
- Vælg derefter ' barnindhold ' klasse og indstil værdierne for ' 300 px ' og ' lyseblå ' til CSS ' højde ' og ' baggrundsfarve ” ejendomme, hhv. Denne klasse udvides til ' forælder ' klasse, der er kontrolleret af CSS ' flyde over ” ejendom.
Efter kompileringen af kodestykker ser websiden sådan ud:
Snapshottet viser, at overløbsindholdet nu er blevet synligt, og rullepanelet eller udklipning er ikke tilføjet som standard.
Eksempel 2: Brug af skjult som en værdi for overløbsegenskab
Det ' overløb-y ' ejendom med værdien ' skjult ' skjuler alt indhold, der bevæger sig uden for sin overordnede container. Denne egenskab tilføjer ikke rullepaneler i stedet for, den klippede det overfyldte indhold:
>
>
Ovenstående kodestykke indeholder:
- Først indsættes den samme kode igen med en forøgelse af dummy-indholdet placeret inde i det indre div-element.
- Derefter skal du ændre værdien af ' overløb-y ' ejendom til ' skjult ' til ' ' tag med en klasse på ' forælder ”.
Efter gengivelse ser websiden sådan ud:
Snapshottet viser, at overløbsindholdet er blevet klippet.
Eksempel 3: Brug af Scroll som en værdi for Overflow-y-egenskab
Indstilling af værdien af ' overløb-y ' ejendom til ' rulle ” giver slutbrugeren mulighed for at rulle gennem
indhold, der flyder over det. Lad os besøge nedenstående kodeblok:
= 'forælder' stil = 'overflow-y: scroll;' >
= 'barneindhold' > Det her er bare dummy indhold bruges til demonstration af overløb-y-egenskaben, når den er sat til synlig. Det her er bare dummy indhold bruges til demonstration af overløb-y-egenskaben, når den er sat til synlig.
>
>I ovenstående kodeblok:
- For det første er den samme HTML-struktur blevet indsat i ' ” tag.
- Derefter skal du ændre værdien af ' overløb-y ' ejendom til ' rulle ”. Dette tillader ' forælder ” div for at aktivere rulleeffekten for at kontrollere det overfyldte indhold.
Efter kompileringen af ovenstående kodeblok ser websiden sådan ud:
Ovenstående gid illustrerer, at rulleeffekten har været tilgængelig til at kontrollere det overfyldte indhold.
Eksempel 4: Brug af Auto som en værdi for Overflow-y-egenskab
I dette eksempel kan brugere kun tilføje en rullepanel, hvis indholdet ikke passer ind i beholderen. Desuden, hvis indholdet ikke flyder over, vil rullepanelet ikke blive tilføjet. Det er muligt ved at angive værdien af ' auto ' til CSS ' overløb-y ” ejendom:
= 'forælder' stil = 'overløb-y: auto;' >
= 'barneindhold' > Det her er bare dummy indhold bruges til demonstration af overløb-y-egenskaben, når den er sat til synlig. Det her er bare dummy indhold bruges til demonstration af overløb-y-egenskaben, når den er sat til synlig.
>
>I ovenstående kodeblok:
- Først skal du indsætte den samme HTML-fil i ' ” tag.
- Opdater derefter værdien af ' overløb-y ' ejendom til ' auto ”. Det aktiverer rulleeffekten i forhold til indholdets lodrette længde.
Efter afslutningen af kompileringsprocessen fungerer websiden sådan:
Ovenstående gif viser overløbsegenskaben, der har aktiveret rullepanelet i henhold til længden af indholdet.
Konklusion
CSS ' overløb-y egenskaben bruges til at kontrollere det overfyldte indhold langs krydsaksen i et element. Overflow-y-egenskaben styrer indholdet i overensstemmelse med den specifikke værdi, der leveres til overflow-y-egenskaberne. Det ' visuel '-værdien viser det overfyldte indhold, ' skjult '-værdi skjuler overløbsindholdet, og ' rulle ” værdi tilføjer en rullepanel til at kontrollere indholdet. Og hvis værdien er ' auto ” rullepanelet tilføjer eller fjerner alt efter indholdets længde.