Virtaus

Verkkosivun virtaus määrittää järjestyksen, jossa elementit näytetään pystysuunnassa ja vaakasuunnassa. Oletuksena elementit näytetään siinä järjestyksessä kuin ne esiintyvät HTML-dokumentissa, ylhäältä alas. Vaakasuuntainen virtaus kulkee yleensä vasemmalta oikealle; kuitenkin oikealta vasemmalle lukevissa kielissä virtaus on myös käänteinen oikealta vasemmalle.

Jokainen HTML-elementti on suorakulmainen alue, joka sijoittuu riville, kuten sanat viivoitetulla paperilla. Elementtejä on kahta päätyyppiä: lohkotason ja sisäiset elementit.

Esimerkin tarkastelun jälkeen seuraava johtopäätös:

Lohkotason elementti: vie koko säiliönsä leveyden sisällön koosta riippumatta. Lohkoelementit asettuvat päällekkäin, yksi toisensa jälkeen.

Rivinsisäinen elementti: vie vain niin paljon leveyttä kuin sen sisältö vaatii. Tämä mahdollistaa rivinsisäisten elementtien sijoittumisen samalle riville. Ne siirtyvät seuraavalle riville, jos yhdellä rivillä ei ole tarpeeksi tilaa.

Elementtityypit

Kuten aiemmin mainittiin, jokaisella elementillä selaimen tyylitiedostossa on tyyppi, joka määritellään display-ominaisuudella ja joka vaikuttaa sen käyttäytymiseen. Kaksi päätyyppiä ovat lohkotason ja rivinsisäiset elementit, mutta lisäksi on myös muita tyyppejä, kuten inline-block-elementit.

Rivinsisäiset elementit: käytetään pääasiassa sisällön pienten osien tyylittelyyn ja korostamiseen, kuten linkit, painikkeet ja kuvat. Ne pysyvät samalla rivillä, kunnes tila loppuu, jolloin ne siirtyvät seuraavalle riville.

Lohkotason elementit: käytetään suurempien sisältörakenteiden, kuten otsikoiden, kappaleiden, listojen ja osioiden (esim. headerit, footerit) määrittelyyn. Ne näkyvät visuaalisesti suorakulmaisina lohkoina, jotka asettuvat pystysuoraan päällekkäin.