Lohko- ja inline-suunnat
Opitte lohko- ja inline-virtaussuunnat sekä sen, miten ne vastaavat pysty- ja vaaka-akseleita.
Lohko- ja inline-suunnat on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Lohkosuunta
Lohkosuunta on suunta, johon lohkotason laatikot pinotaan. Vaakasuorissa kirjoitusjärjestelmissä (LTR ja RTL) lohkosuunta on ylhäältä alas. Pystysuuntaisissa kirjoitustiloissa se muuttuu suunnaksi vasemmalta oikealle tai oikealta vasemmalle.
Inline-suunta
Inline-suunta on suunta, johon teksti etenee rivillä. LTR-kielissä inline-suunta on vasemmalta oikealle. RTL-kielissä se on oikealta vasemmalle. Pystysuuntaisissa kirjoitustiloissa siitä tulee ylhäältä alas etenevä.
writing-mode-ominaisuus
writing-mode määrittää tekstin etenemisen perussuunnan:
horizontal-tb— vaakasuora teksti ylhäältä alas (oletusarvo)vertical-rl— pystysuora teksti, sarakkeet oikealta vasemmallevertical-lr— pystysuora teksti, sarakkeet vasemmalta oikealle
Vaakasuora kirjoitusjärjestelmä
Kun käytössä on writing-mode: horizontal-tb (oletusarvo):
- Lohkosuunta = pystysuora (ylhäältä → alas)
- Inline-suunta = vaakasuora (LTR: vasemmalta → oikealle, RTL: oikealta → vasemmalle)
- Block-start = yläreuna, block-end = alareuna
- Inline-start = vasen (LTR) tai oikea (RTL)
Pystysuora kirjoitusjärjestelmä
Kun käytössä on writing-mode: vertical-rl:
- Lohkosuunta = vaakasuora (oikealta → vasemmalle)
- Inline-suunta = pystysuora (ylhäältä → alas)
- Block-start = oikea, block-end = vasen
- Inline-start = yläreuna, inline-end = alareuna
Akselien hahmottaminen
Ajatelkaa sitä koordinaattijärjestelmänä, joka kiertyy kirjoitustilan mukana. Loogiset ominaisuudet kuvaavat sijainteja suhteessa tähän kääntyvään järjestelmään eivätkä kiinteään näyttöön.
text-orientation
Pystysuuntaisissa kirjoitustiloissa text-orientation määrittää yksittäisten merkkien suunnan:
mixed: Latin-merkit käännetään, CJK-merkit pidetään pystyasennossaupright: kaikki merkit ovat pystyasennossa (pystysuuntaista CJK-tekstiä varten)sideways: kaikki merkit käännetään sivuttain
Sivuttain käännetyt pystysuuntaiset tunnisteet
Käytännön käyttötapaus: sivupalkin tai kaavion akselin käännetyt tunnisteet vaakasuuntaisissa kirjoituskonteksteissa:
<div class="chart-label">Revenue</div>
Kirjoitustilojen yhdistäminen
Säilöllä voi olla yksi kirjoitustila, kun taas yksittäisillä inline-elementeillä voi olla toinen. Tätä käytetään latinalaisten ja CJK-merkkien yhdistämiseen samassa kappaleessa.
Block-size ja inline-size
Leveyden ja korkeuden loogiset vastineet:
inline-size= leveys tilassa horizontal-tb (inline-mitta)block-size= korkeus tilassa horizontal-tb (lohkomitta)
<div class="box">inline-size sets the width in LTR</div>
text-combine-upright-ominaisuus
Kun pystysuuntainen teksti sisältää numeroita tai lyhenteitä, text-combine-upright (tcy) pitää lyhyet merkkijonot pystyasennossa ja tiivistettyinä yhteen pystysuuntaiseen tekstisoluun.
Pikatarkistus
Kun käytössä on writing-mode: horizontal-tb ja LTR-kieli, mikä akseli on "lohkoakseli"?
Kertaus
Lohkoakseli on lohkolaatikoiden pinoamissuunta, kun taas inline-akseli on tekstin etenemissuunta. Vaakasuorissa kirjoitusjärjestelmissä lohkoakseli on pystysuora ja inline-akseli vaakasuora. Pystykirjoituksessa ne vaihtuvat. writing-mode määrittää akseleiden perussuunnan. Loogiset ominaisuudet mukautuvat kulloinkin käytössä oleviin lohko- ja inline-akseleihin.
Opi CSS tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Lohko- ja inline-suunnat” ilmainen?
Kyllä – oppitunnin ”Lohko- ja inline-suunnat” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Lohko- ja inline-suunnat”?
Opitte lohko- ja inline-virtaussuunnat sekä sen, miten ne vastaavat pysty- ja vaaka-akseleita. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Lohko- ja inline-suunnat”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Miksi loogiset ominaisuudet ovat tärkeitä: kansainvälistäminen
- Lohko- ja inline-suunnat
- Loogiset margin-, padding- ja border-ominaisuudet
- Loogiset ominaisuudet RTL-asetteluissa