CSS' ylivuoto ” -ominaisuutta käytetään hallitsemaan valitun HTML-elementin sisällön ylivuotoa. Sisältöä voidaan ohjata tiettyyn suuntaan ' ylivuoto-y ' ja ' ylivuoto-x ” ominaisuuksia. 'Overflow'-ominaisuus hyväksyy arvot, kuten ' rullaa ”, “ näkyvissä ”, “ piilotettu ' ja ' auto ” ja ne vaihtelevat toiminnallisesti toisistaan. Tämä opas kuitenkin osoittaa eron overflow:scroll:n ja overflow:auton välillä käytännön esimerkein.
Miten overflow:scroll eroaa overflow:autosta?
Suurin ero ' rullaa ' ja ' auto '-arvo on, että ' overflow:scroll ” näyttää aina vierityspalkin, tarvitaanko sitä vai ei, mikä luo visuaalisen häiriötekijän. Toisaalta ' ylivuoto:auto ” näyttää vierityspalkin vain, kun sisältö on täynnä. Tällä tavalla voidaan luoda selkeämpi ja virtaviivaisempi muotoilu, joka kiinnittää helposti käyttäjän huomion.
Esimerkki 1: Overflow:scroll-ominaisuuden käyttäminen
CSS' overflow:scroll ”-ominaisuus asettaa oletusarvoisesti vierityspalkin hallitsemaan ylivuoteltua sisältöä. Se ei näe ylivuotosisältöä ja käyttää sitten vierityspalkkia. Sen sijaan se näyttää vaaka- ja pystysuoran vierityspalkin koodin laatimisen jälkeen, mutta käyttäjä voi muokata ja näyttää vain sivuvierityspalkin suunnittelun vaatimusten mukaisesti.
Käy alla olevassa koodissa käyttääksesi 'overflow:scroll' -ominaisuutta:
< div >
< h3 > Esimerkki varten Ylivuoto: vieritä h3 >
< div luokkaa = 'scrollingBox scroll' >
< s > Tämä on vain käytettyä tyhjää sisältöä varten osoitus erosta ylivuoto-y ominaisuuden arvon vierityksen ja automaattisen välillä.
s >
div >
div >
Yllä olevassa koodilohkossa:
- Ensinnäkin juuri ' div '-elementti luodaan ja käyttää sisäkkäistä ' '-tunniste siinä.
- Määritä seuraavaksi luokat ' scrollingBox ' ja ' rullaa ' jo luotuun sisäkkäiseen '
' -tunniste.- Anna lopuksi valetiedot ' ' ja ' ' -tunnisteet ' div ”elementtejä.
Kun olet luonut HTML-rakenteen, käytä CSS-ylivuotoominaisuutta:
< tyyli >
.scrollingBox {
leveys: 300px;
korkeus: 150px;
reuna: 1px kiinteä tummanharmaa;
}
.selaa {
ylivuoto: rullaa;
}
tyyli >Kuvaus yllä olevasta CSS-koodista:
- Valitse ensin ' scrollingBox '-luokka ja anna arvot ' 300 pikseliä ”, “ 150 pikseliä ' ja ' 1px kiinteä tummanharmaa 'CSS:ään' leveys ”, “ korkeus ”, ja ” rajaa ” ominaisuuksia. Näitä ominaisuuksia hyödynnetään parempaan visualisointiprosessiin.
- Seuraavaksi ' rullaa ' luokka on valittuna ja arvo ' rullaa ' välitetään CSS:lle' ylivuoto ” omaisuutta.
Kokoonpanovaiheen päätyttyä:
Yllä oleva tulos osoittaa, että sisältö ei ole täynnä, mutta vierityspalkki on lisätty sekä X- että Y-akselille.
Esimerkki 2: Ylivuoto:auto-ominaisuuden käyttäminen
Overflow:auto-ominaisuus on kuin overflow:scroll, koska molemmat voivat näyttää vierityspalkin. Ainoa ero on, että ' ylivuoto:auto ” lisää vierityspalkin, kun sisältö on täynnä, ja jos sisältö ei ole täynnä, vierityspalkkia ei lisätä. Sitä käytetään enimmäkseen responsiivisen web-suunnittelun luomisessa sen dynaamisesti muuttuvan luonteen vuoksi.
Käy esimerkiksi alla olevassa koodissa:
< div luokkaa = 'automaattinen esimerkki' >
< h3 > Esimerkki varten Ylivuoto: auto h3 >
< div luokkaa = 'scrollingBox' tyyli = 'ylivuoto: auto' >
< s > Tämä on vain käytettyä tyhjää sisältöä varten osoitus erosta ylivuoto-y ominaisuuden arvon vierityksen ja automaattisen välillä.
s >
div >
div >Yllä olevassa koodilohkossa:
- Ensin käytetään samaa HTML-rakennetta, ja valetiedot toimitetaan ' h3 ”, ja ” s ”elementtejä muutetaan.
- Seuraavaksi ' tyyli ' attribuuttia käytetään sisäisen sisäkkäisen ' div '-elementti ja asettaa 'arvon' auto 'CSS:ään' ylivuoto ” omaisuutta.
Suorituksen jälkeen ' div ”-elementti näyttää nyt tältä:
Yllä oleva tilannekuva osoittaa, että vierityspalkkia ei lisätä sisällön pituuden mukaan.
Nyt vain vähän lisäselvitystä ' ylivuoto:auto ” omaisuutta. Yritä toimittaa suuri määrä tietoja sisäkkäiseen ' div ”elementtiä. Koodin päivityksen jälkeen verkkosivu näyttää tältä:
Tulos vahvistaa, että vierityspalkki on nyt lisätty ylivuotosisällön vuoksi.
Johtopäätös
' overflow:scroll ' ja ' ylivuoto:auto ”-ominaisuudet vaihtelevat tilanteessa, jossa ne lisäävät vierityspalkin. 'Overflow:scroll' näyttää aina vierityspalkin riippumatta siitä, onko sisältö ylivuoto vai ei. 'Overflow:auto' näyttää vierityspalkin vain, kun valitun HTML-elementin sisältö on täynnä. CSS:n arvo ylivuoto ”-ominaisuus riippuu erityisistä suunnittelu- ja käyttökokemusvaatimuksista. Tämä artikkeli on osoittanut eron 'overflow:scroll'- ja 'overflow:auto'-ominaisuuksien välillä.
- Määritä seuraavaksi luokat ' scrollingBox ' ja ' rullaa ' jo luotuun sisäkkäiseen '