Haaste: Ennusta Sivun Asettelu Eri Elementtityypeillä

Tehtävä

Tutki annettua HTML-koodia ja ennusta, miltä sivu näyttää selaimessa. Mukana on kolme <div>-elementtiä, joista jokainen sisältää yhdistelmän rivinsisäistä ja lohkotason elementtiä.

<div>
  <span>This is an inline element</span>
  This is a block-level element.
</div>

<div>
  This is a block-level element.
  <span>This is an inline element</span>
</div>

<div>
  This is a block-level element.
  <span>This is an inline element</span>
  This is another block-level element.
</div>

Pohdittavia kysymyksiä

1. Miten rivinsisäiset ja lohkotason elementit vuorovaikuttavat kunkin <div>-elementin sisällä?
2. Miten elementtien järjestys vaikuttaa asetteluun?
3. Millainen visuaalinen hierarkia muodostuu rivinsisäisten ja lohkotason elementtien välille kussakin <div>-elementissä?

1. Miten rivinsisäiset ja lohkotason elementit vuorovaikuttavat kunkin <div>-elementin sisällä?
   • Ensimmäisessä ja toisessa <div>-elementissä <span>-elementti (rivinsisäinen) esiintyy ennen tekstiä (lohkotaso);
   • Kolmannessa <div>-elementissä <span>-elementti on tekstin (lohkotaso) keskellä.
2. Miten elementtien järjestys vaikuttaa asetteluun?
   • Ensimmäisessä <div>-elementissä teksti "This is a block-level element." todennäköisesti näkyy rivinsisäisen elementin alapuolella <div>-säiliön oletuslohkotason käyttäytymisen vuoksi;
   • Toisessa <div>-elementissä elementtien järjestys on päinvastainen, joten teksti näkyy todennäköisesti rivinsisäisen elementin yläpuolella;
   • Kolmannessa <div>-elementissä teksti ja rivinsisäinen elementti vuorottelevat, joten asettelu näyttää tekstin ja rivinsisäisen elementin järjestyksessä.
3. Millainen visuaalinen hierarkia muodostuu rivinsisäisten ja lohkotason elementtien välille kussakin <div>-elementissä?
   • Rivinsisäinen elementti (<span>) todennäköisesti näkyy tekstin kanssa samalla rivillä kaikissa tapauksissa, mutta sen sijainti vaihtelee elementtien järjestyksen mukaan <div>-säiliössä.