Šiame straipsnyje daug pavyzdžių parodomas CSS perpildymo ypatybės naudojimas.
Kaip naudoti „Overflow-y“ nuosavybę CSS?
CSS“ perpildymas-y ypatybė naudojama norint valdyti turinio perpildymą išilgai elemento skersinės ašies. Nurodoma, ar turinį iškirpti, ar pridėti slinkties juostą, kai turinys viršija konteinerio aukštį. Galimos šios nuosavybės vertės yra „ matomas “, „ paslėptas “, „ slinkti “ ir „ automatinis “.
Norėdami geriau parodyti perpildymo y ypatybę, peržiūrėkite toliau pateiktus pavyzdžius:
1 pavyzdys: Matomas kaip perpildymo y nuosavybės vertės naudojimas
„ matomas “ vertė leidžia turiniui persipilti iš sudėtinio rodinio ir neprideda jokių iškarpų ar slinkties juostų. Apsilankykite žemiau esančiame praktiškame kodų bloke:
>
>
>
Aukščiau pateikto kodo bloko aprašymas:
- Pirmiausia priskirkite reikšmę „ tėvas “ į „ klasė ' atributas ir naudokite ' stilius “ atributas.
- Be to, nurodykite „ matomas 'į CSS' perpildymas-y ' nuosavybė. Ir nustatykite jį lygų ' stilius “, kad CSS stilius veiktų.
- Tada sukurkite įdėtą „ div “ elementą ir priskirkite jam „klasę“ vaikasTurinys “. Taip pat pateikite netikrus duomenis.
Dabar naudokite CSS ypatybes, kad pagerintumėte vizualizaciją, kuri padeda geriau suprasti CSS perpildymo y ypatybę:
.tėvas {plotis : 200 piks ;
aukščio : 150 piks ;
siena : 1px kietas juodas ;
}
.vaikasTurinys {
aukščio : 300 piks ;
fono spalva : šviesiai mėlynas ;
}
CSS ypatybių aprašymas pateikiamas žemiau:
- Pirma, „ tėvas “ yra pasirinkta klasė ir „“ reikšmės 200 piks “, „ 150 piks “ ir „ 1px vientisas juodas “ yra priskirti CSS “ plotis “, „ aukščio “ ir „ siena “ savybes, atitinkamai.
- Tada pasirinkite „ vaikasTurinys “ klasę ir nustatykite „“ reikšmes 300 piks “ ir „ šviesiai mėlynas 'į CSS' aukščio “ ir „ fono spalva “ savybes, atitinkamai. Ši klasė yra išplėsta iki „ tėvas 'klasė, kurią valdo CSS' perpildymas ' nuosavybė.
Surinkus kodo fragmentus, tinklalapis atrodo taip:
Momentinė nuotrauka rodo, kad perpildymo turinys dabar buvo matomas, o slinkties juosta arba iškarpa nėra įtraukta pagal numatytuosius nustatymus.
2 pavyzdys: Hidden naudojimas kaip perpildymo y nuosavybės vertės
„ perpildymas-y “ turtas, kurio vertė “ paslėptas “ paslepia visą turinį, kuris perkeliamas už pagrindinio konteinerio ribų. Ši nuosavybė neprideda slinkties juostų, o apkarpė perpildytą turinį:
>
>
Aukščiau pateiktame kodo fragmente yra:
- Pirma, tas pats kodas vėl įterpiamas, padidinus netikrą turinį, patalpintą vidiniame div elemente.
- Tada pakeiskite ' reikšmę perpildymas-y ' nuosavybė ' paslėptas “ į „ “ žyma, kurios klasė yra “ tėvas “.
Po pakartotinio pateikimo tinklalapis atrodo taip:
Momentinėje nuotraukoje rodoma, kad perpildymo turinys buvo nukirptas.
3 pavyzdys: slinkties naudojimas kaip perpildymo y nuosavybės vertės
„“ vertės nustatymas perpildymas-y ' nuosavybė ' slinkti “ leidžia galutiniam vartotojui slinkti
turinys, kuris jį perpildo. Leiskite mums apsilankyti žemiau esančiame kodų bloke:
= 'tėvas' stilius = 'perpildymas-y: slinkti;' >
= „vaiko turinys“ > Tai tik manekenas turinys naudojamas perpildymo y ypatybei parodyti, kai ji nustatyta kaip matoma. Tai tik manekenas turinys naudojamas perpildymo y ypatybei parodyti, kai ji nustatyta kaip matoma.
>
>Aukščiau pateiktame kodo bloke:
- Pirma, ta pati HTML struktūra buvo įterpta į „
“ žymą. - Tada pakeiskite ' reikšmę perpildymas-y ' nuosavybė ' slinkti “. Tai leidžia „ tėvas “ div, kad įjungtumėte slinkimo efektą, kad būtų galima valdyti perpildytą turinį.
Sudarius aukščiau pateiktą kodo bloką, tinklalapis atrodo taip:
Aukščiau pateiktas gidas iliustruoja, kad slinkimo efektas buvo pasiekiamas norint valdyti perpildytą turinį.
4 pavyzdys: Automatinis naudojimas kaip perpildymo y nuosavybės vertės
Šiame pavyzdyje vartotojai gali pridėti slinkties juostą tik tuo atveju, jei turinys netelpa į konteinerį. Be to, jei turinys neperpildytas, slinkties juosta nebus pridėta. Tai įmanoma pateikus vertę „ automatinis 'į CSS' perpildymas-y ' nuosavybė:
= 'tėvas' stilius = 'perpildymas-y: automatinis;' >
= „vaiko turinys“ > Tai tik manekenas turinys naudojamas perpildymo y ypatybei parodyti, kai ji nustatyta kaip matoma. Tai tik manekenas turinys naudojamas perpildymo y ypatybei parodyti, kai ji nustatyta kaip matoma.
>
>Aukščiau esančiame kodo bloke:
- Pirmiausia įterpkite tą patį HTML failą į „
“ žymą. - Tada atnaujinkite „ perpildymas-y ' nuosavybė ' automatinis “. Tai įgalina slinkimo efektą, palyginti su vertikaliu turinio ilgiu.
Pasibaigus kompiliavimo procesui, tinklalapis veikia taip:
Aukščiau pateiktame GIF rodoma perpildymo ypatybė, kuri įgalino slinkties juostą pagal turinio ilgį.
Išvada
CSS“ perpildymas-y ypatybė naudojama valdyti perpildytą turinį išilgai elemento skersinės ašies. Ypatybė perpildymo y valdo turinį pagal konkrečią perpildymo y ypatybių vertę. „ vizualinis ' reikšmė rodo perpildytą turinį, ' paslėptas “ reikšmė paslepia perpildymo turinį, o „ slinkti “ vertė prideda slinkties juostą turiniui valdyti. Ir jei vertė yra ' automatinis “ slinkties juosta pridedama arba pašalinama pagal turinio ilgį.
- Pirma, ta pati HTML struktūra buvo įterpta į „