ai-css-box-modell

A CSS doboz modell

date szeptember 25, 2009 @ 20:15

category Nincs kategorizálva
category , ,

Hát akkor következzen az első, nem kifejezetten CSS 3-mal foglalkozó poszt, ha már megígértem BonFire-nek, hogy az alapokról is írok egy kicsit. A tankönyvek nem itt kezdik, de szerintem ez a legfontosabb.

Minden elem, amit a HTML body tag-ben használunk egy téglalap alakú dobozba kerül a weboldalon. Persze ezt a téglalapot alap esetben nem látjuk, de attól még ott van, és a CSS segítségével mindenféle stílussal ruházhatjuk fel. Készítettem két ábrát, hogy megmutassam, hogyan is kell ezt az egészet elképzelni. Az első képen a doboz “robbantott ábrája” látható, míg a másodikon az, ahogyan a böngészőben végül is megjelenik.

ai-css-doboz-modell-1

A doboz következő tulajdonságait szabhatjuk testre:

  • border: A doboz szegélye. Alapértelmezés szerint nem látszik. Megadhatjuk a vastagságát, a stílusát, a színét, stb.
  • background: A doboz háttere. Megadhatunk egy színt és/vagy egy képet, továbbá beállíthatjuk, hogy a kép ismétlődjön-e, ha kisebb, mint a doboz.
  • margin: A minimális távolság a doboz széle és a weboldal már elemei között.
  • padding: A távolság a doboz széle és belső tartalma között.
  • width: A doboz szélessége, padding és margin nélkül.
  • height: A doboz magassága, padding és margin nélkül.

ai-css-doboz-modell-2

Ez pedig itt egy példa, ahol a következő CSS beállításokat alkalmaztam:

div {
    width: 500px;
    border-style: dashed;
    border-width: medium;
    background-color: #CFC;
    background-image: url(box-modell-bg.jpg);
    background-position: center;
    padding: 10px;
}

Persze szinte mindegyik felsorolt tulajdonságról lehetne akár egy külön posztot is írni, ugyanis a gyakorlatban sokszor meggyűlik az ember baja azzal, hogy ezen tulajdonságok beállítása nem a kívánt eredményt hozza. Ez lehet azért, mert a böngésző nem szabványos módon jeleníti meg a tartalmat – erre főleg az IE 6 és a korább verziók hajlamosak -, vagy azért, mert olyan HTML elemre akarjuk alkalmazni a beállítást, amelyre nem lehet. Érdemes sokat gyakorolni, de ajánlanék két remek forrást is a tanuláshoz, amelyeket én is használok. Az egyik egy weboldal, a másik egy könyv:

Persze lesz még a CSS alapokról szó ezen a blogon is. És persze kérdezzetek nyugodtan, mert ez csak a jéghegy csúcsa.