CSS' ülevool ” atribuuti kasutatakse valitud HTML-elemendi sisu ületäitumise kontrollimiseks. Sisu saab juhtida ühes kindlas suunas, kasutades “ ülevool-y ” ja „ ülevool-x ” omadused. Atribuut 'ülevool' aktsepteerib selliseid väärtusi nagu ' kerige ”, „ nähtav ”, “ peidetud ” ja „ auto ” ja nende funktsionaalsus on üksteisest erinev. See juhend näitab aga praktiliste näidete abil erinevust overflow:scroll ja overflow:auto vahel.
Kuidas overflow:scroll erineb overflow:auto-st?
Peamine erinevus ' kerige ” ja „ auto ' väärtus on see, et ' ületäitumine:kerimine ” näitab alati kerimisriba, olenemata sellest, kas see on vajalik või mitte, mis loob visuaalse tähelepanu kõrvalejuhtimise. Teisest küljest ' ületäitumine: auto ” kuvab kerimisriba ainult siis, kui sisu on täis. Nii saab luua puhtama ja voolujoonelisema disaini, mis tõmbab hõlpsalt kasutaja tähelepanu.
Näide 1: Overflow:scroll Property kasutamine
CSS' ületäitumine:kerimine ” atribuut määrab vaikimisi kerimisriba ületäitunud sisu juhtimiseks. See ei näe ületäitumise sisu ja rakendab seejärel kerimisriba. Selle asemel kuvab see pärast koodi koostamist horisontaalse ja vertikaalse kerimisriba, kuid kasutaja saab vastavalt disaini nõuetele muuta ja kuvada ainult külgmist kerimisriba.
Atribuudi „overflow:scroll” kasutamiseks külastage allolevat koodi:
< div >
< h3 > Näide jaoks Ületäitumine: kerige h3 >
< div klass = 'scrollingBoxi kerimine' >
< lk > See on lihtsalt näiv sisu, mida kasutatakse jaoks ületäitumise y atribuudi väärtuse kerimise ja automaatse vahelise erinevuse demonstreerimine.
lk >
div >
div >
Ülaltoodud koodiplokis:
- Esiteks juur ' div ' element luuakse ja kasutab pesastatud ' ” silt selles.
- Järgmisena määrake klassid ' scrollingBox ” ja „ kerige ' juba loodud pesastatud '
” silti.- Lõpuks esitage näidisandmed ' ” ja „ ' sildid '' sees div ” elemente.
Pärast HTML-i struktuuri loomist rakendage CSS-i ületäitumise atribuuti:
< stiilis >
.scrollingBox {
laius: 300 pikslit;
kõrgus: 150 pikslit;
ääris: 1px ühtlane tumehall;
}
.kerige {
ületäitumine: kerimine;
}
stiilis >Ülaltoodud CSS-koodi kirjeldus:
- Esmalt valige ' scrollingBox ' klassi ja esitage väärtused ' 300 pikslit ”, “ 150 pikslit ” ja „ 1px tahke tumehall 'CSS-i' laius ”, “ kõrgus ”, ja „ piir ” omadused. Neid omadusi kasutatakse paremaks visualiseerimisprotsessiks.
- Järgmiseks ' kerige ' klass on valitud ja väärtus ' kerige ' edastatakse CSS-ile' ülevool ” vara.
Pärast koostamisfaasi lõppu:
Ülaltoodud väljund näitab, et sisu ei ole ülevoolav, vaid kerimisriba on lisatud nii X- kui ka Y-teljele.
Näide 2: Overflow:auto Property kasutamine
Atribuut overflow:auto on nagu overflow:scroll, kuna mõlemad saavad kuvada kerimisriba. Ainus erinevus on see, et ' ületäitumine: auto ” lisab kerimisriba, kui sisu on täis, ja kui sisu ei ole täis, siis kerimisriba ei lisata. Selle dünaamiliselt muutuva olemuse tõttu kasutatakse seda enamasti tundliku veebidisaini loomisel.
Näiteks külastage allolevat koodi:
< div klass = 'automaatne näide' >
< h3 > Näide jaoks Ülevool: auto h3 >
< div klass = 'kerimiskast' stiilis = 'ülevool: auto' >
< lk > See on lihtsalt näiv sisu, mida kasutatakse jaoks ületäitumise y atribuudi väärtuse kerimise ja automaatse vahelise erinevuse demonstreerimine.
lk >
div >
div >Ülaltoodud koodiplokis:
- Esiteks kasutatakse sama HTML-i struktuuri ja näidisandmed edastatakse h3 ”, ja „ lk ” elemente muudetakse.
- Järgmiseks ' stiilis ' atribuuti kasutatakse sisemise pesastusega ' div ' element ja määrab ' väärtuse auto 'CSS-i' ülevool ” vara.
Pärast hukkamist ' div ” element näeb nüüd välja selline:
Ülaltoodud hetktõmmis näitab, et kerimisriba ei lisata vastavalt sisu pikkusele.
Nüüd, et saada veidi rohkem teavet ületäitumine: auto ” vara. Proovige sisestada pesastatud ' div ” element. Pärast koodi värskendamist näeb veebileht välja selline:
Väljund kinnitab, et kerimisriba on nüüd lisatud ületäituva sisu tõttu.
Järeldus
' ületäitumine:kerimine ” ja „ ületäitumine: auto ” omadused erinevad kerimisriba lisamise olukorra poolest. Ületäitumine:kerimine näitab alati kerimisriba olenemata sellest, kas sisu on ületäitunud või mitte. Kui „ületäitmine:auto” näitab kerimisriba ainult siis, kui valitud HTML-elemendi sisu on täis. CSS-i väärtus ' ülevool ” omadus sõltub konkreetsest disainist ja kasutajakogemuse nõuetest. See artikkel on näidanud erinevust atribuutide „overflow:scroll” ja „overflow:auto” vahel.
- Järgmisena määrake klassid ' scrollingBox ” ja „ kerige ' juba loodud pesastatud '