2.2. tēma: Izkārtojuma kontrole un "Box Model"

Tavs šīs stundas izaicinājums: Pārveidot haotisku saturu sakārtotā dizainā, kontrolējot elementu izmērus, atkāpes un apmales atbilstoši "Box Model" principiem.

1.1.1. Secina par struktūru un ergonomiku; 2.4.1. Strukturē teksta dokumentu atbilstoši prasībām.

Teorija: Kas ir Box Model?

Katrs HTML elements pārlūka acīs ir taisnstūra kaste. Box Model sastāv no četrām daļām:

Content: Pašsaturs (teksts, attēls).
Padding (Iekšējā atkāpe): Telpa starp saturu un apmali. Tā padara elementu "elpojošāku".
Border (Apmale): līnija apkārt paddingam un saturam.
Margin (Ārējā atkāpe): Telpa ap elementu, kas atgrūž citus elementus.

Pareiza šo īpašību lietošana nodrošina spēles saskarnes (UI) skaidrību un lietojamību.

1. uzdevums: Kastes vizualizācija

Piešķirt elementiem redzamas robežas un iekšējās atkāpes, lai izprastu to aizņemto vietu.

Izpildes soļi:

Izvēlies savā HTML failā kādu <section> vai <div> bloku.
CSS failā piešķir tam background-color, border (piem., 2px solid black) un padding: 20px;.
Vēro, kā saturs attālinās no apmales, padarot tekstu daudz vieglāk lasāmu.

2. uzdevums: Atstatumu regulēšana starp blokiem

Izmantot margin, lai izveidotu tīru un organizētu lapas struktūru.

Izpildes soļi:

Pievieno vairākiem <section> blokiem klasi .kaste.
CSS vidē iestati margin-bottom: 30px;, lai bloki nesaliptu kopā.
Izmēģini margin: 0 auto; kopā ar fiksētu width (piem., 80%), lai nocentrētu visu satura bloku ekrāna vidū.

3. uzdevums: Spēles laukuma rāmja sagatave

Izveidot vizuālu konteineru, kas nākotnē kalpos kā tavas spēles laukums.

Izpildes soļi:

HTML failā izveido jaunu <div id="game-container"></div>.
CSS failā šim ID piešķiri konkrētu platumu un augstumu (piem., 600x400px), izteiksmīgu apmali un fonu.
Veic Commit un Push ar ziņu "Izveidots spēles laukuma rāmis ar Box Model".

Biežākās kļūdas (un kā tās labot):

Kastes kopējais platums: Atceries, ka width + padding + border summējas. Ja lapa "iziet" no rāmjiem, izmanto box-sizing: border-box;.
Margin sabrukšana: Divi kaimiņu margini nevis saskaitās, bet pārklājas (lielākais uzvar).
Padding trūkums: Teksts, kas pieskaras apmalei, izskatās neprofesionāli un ir grūti lasāms.

Koda piemērs (Box Model rīki)

#game-container {
    width: 400px;
    height: 300px;
    padding: 10px;    /* Iekšpusē */
    border: 5px solid #333; 
    margin: 20px auto; /* Ārpusē, centrēts */
    background-color: #95a5a6;
    box-sizing: border-box; /* Ļoti svarīgi! */
}

Spēles laukuma prototips (demonstrācija)