A dobozok egymás köré vannak építve, mint a hagyma rétegei. Ahogy a böngészők meghatározzák a weboldal elrendezését, minden doboznak megadják a stílust, meghatározzák a dobozok egymáshoz való helyzetét és méretét. A CSS elrendezésének megismerése előtt azonban meg kell ismernünk a doboz modellt — ez lesz mai leckénk témája.

A doboz tulajdonságai

Minden elem egy dokumentumon belül egy négyszögletű dobozként van strukturálva. A doboz legfontosabb tulajdonságai a következők:

Szélesség és magasság

A width és a height tulajdonságok határozzák meg a tartalomdoboz szélességét és magasságát. A tartalomdoboz az a terület, amelyben a doboz tartalma megjelenik.

Térköz

A padding a CSS-doboz belső margójára utal — a tartalomdoboz külső határa és a keret belső része között. Ez a réteg beállítható minden oldalról egyszerre a padding tulajdonság segítségével vagy külön-külön a padding-top, padding-right, padding-bottom és a padding-left tulajdonságokkal.

Keret

A CSS-doboz kerete a térköz külső széle és a margó belső széle között helyezkedik el. A keret alapbeállítás szerint 0 — azaz láthatatlan —, de a vastagsága, stílusa és színe tetszés szerint beállítható a border tulajdonság segítségével, minden oldalról egyszerre, például így: border: 1px solid black. A keretek egyenként, sokkal specifikusabban is beállíthatóak a következő tulajdonságok segítségével:

border-top, border-right, border-bottom és border-left: ezekkel a tulajdonságokkal beállíthatjuk az oldal keretének vastagságát, színét vagy stílusát.

border-width, border-style, border-color: csak a vastagságot, stílust vagy színt állítják be, de minden oldalra vonatkozóan.

Természetesen minden oldalra külön-külön is beállíthatunk egy-egy tulajdonságot a border-top-width, border-top-style, border-top-color stb. tulajdonságok segítségével.

Margó

A margó a CSS-dobozokat veszi körül, és meghatározza a többi doboztól való távolságukat. A margókat egyszerre a margin tulajdonsággal tudjuk beállítani, egyenkénti beállításra pedig a margin-top, margin-right, margin-bottom és margin-left tulajdonságokat használhatjuk.

Haladó beállítások

A fent említett tulajdonságokon kívül számos másik is létezik, melyekkel hathatunk a dobozok viselkedésére. Vegyük át őket röviden:

Overflow

Mikor a doboz méreteit abszolút értékek segítségével állítjuk be, a tartalom esetenként nem fér be, és „kiömlik” a dobozból. Az overflow tulajdonság segítségével kontrollálhatjuk, mi történjen az ilyen esetekben. A leggyakoribb értékek a következők:

auto: ha túl sok tartalom van, a tartalom rejtve marad, és a felhasználó a görgetősávval tudja megtekinteni a rejtett részeket

hidden: ha túl sok tartalom van, a tartalom rejtve marad

visible: ha túl sok tartalom van, a „kiömlő” tartalom a dobozon kívül jelenik meg (általában ez az alapértelmezett viselkedés).

Background clip

A dobozok háttere színekből és képekből áll (background-color, background-image). Az alapbeállítás szerint a háttér egészen a keret külső széléig terjed. Ez gyakran teljesen rendben is van, de időnként szeretnénk, ha ez nem így lenne. Ilyen esetben használhatjuk a background-clip tulajdonságot a dobozon.

Outline

Az outline hasonlít a kerethez, de nem része a box modellnek. Úgy viselkedik, mint a keret, de a dobozon kívül, a margó területében van meghúzva, és nem változtatja a doboz méretét.

A CSS-dobozok típusai

Minden, amiről eddig szó volt, a blokkszintű elemekre vonatkozott. A CSS-ben azonban más doboztípusok is vannak, melyek máshogy viselkednek. Az elemhez csatlakoztatott doboz típusát a display tulajdonság határozza meg. A displaynek számos értéke van, cikkünkben a három leggyakoribbra összpontosítunk:

A block doboz más dobozokon helyezkedik el, és beállítható a szélessége, magassága. A fent leírt doboz modell a block dobozokra vonatkozik.

Az inline doboz a block doboz ellentéte: beleolvad a dokumentum szövegébe. A szélesség és a magasság beállítása nincs hatással az inline dobozokra, a térköz, a margó és a keret beállítása pedig a környező szövegre is hatással van, viszont nem befolyásolja a környező block dobozokat.

Az inline-block doboz az előző két típus ötvözete: beleolvad a környező szövegbe, mint az inline doboz, de méretezhető is, mint a block doboz.

A blokkszintű elemek alapértelmezett beállítása a display: block;, az inline elemek esetében pedig ez a display: inline; beállítás.

Összegzés:

Most már tisztában vagy a CSS-dobozok fogalmával és működési elvével. Ha nem teljesen világos minden, akkor sem kell aggódnod — szükség esetén visszaolvashatod a cikket, hogy felelevenítsd az információkat. Miután néhány gyakorlati példával is találkoztál, biztos, hogy nem fogod nehéznek találni a CSS-dobozokkal való munkát. Következő leckénkben a CSS-debuggolással fogunk foglalkozni! Addig is jó gyakorlást!

Nyereményjáték!

Rovatunk elsődleges célja, hogy közelebbről is bemutassa a legismertebb webtechnológiákat. Azok között az olvasók között, akik minden héten követik rovatunkat, azaz velünk tanulják a programozás alapjait és kitöltik a feladatsort, a sorozat végén egy laptopot sorsolunk ki.
 

A játék heti kérdése:

Hol helyezkedik el a doboz kerete?

A választ a tanulok@erdsoft.com e-mail-címre kell elküldeni, a tárgysorba pedig a következőt kell beírni: HÉTNAP-TANULOK. Sok szerencsét!
 

Néhány szó rólunk:

Az ErdSoft (www.erdsoft.com) 2011-ben alakult meg. Csapatunkat a fiatalos lendület, a szakértelem, a folyamatos tanulás és tapasztalatgyűjtés jellemzi. Ügyfeleinknek igyekszünk teljes körű szolgáltatást nyújtani — bátran fordulhatnak hozzánk, legyen szó webfejlesztésről, alkalmazásokról, SEO-optimalizálásról, grafikai tervezésről, marketingről vagy szövegírásról. Csapatunk sikerét mi sem bizonyítja jobban, mint a több száz elkészült weboldal és a számos elégedett ügyfél Szerbiában, Magyarországon és az Egyesült Királyságban.