b{}xm{}dels.toxin.hu

Ma megtanulhattam hogy … CSS-ben a doboz modell határozza meg a kapcsolatot a következő tulajdonságok között: display, width, height, padding, margin, background, overflow és visibility. Hat box modellel találkozhatunk CSS- alatt: inline, inline-block, block, table, floated, absolute. Azért hogy az életünket megkönnyítsék ezen modellek a fenti tulajdonságokra eltérően reagálnak és emiatt eltérő megjelenítésbeli változást is érhetünk el velük, nembeszélve a böngészők közötti megjelenítésbeli különbségről. Eddig csak a felszínét kapirgáltam meg a témának, de a leghosszabb út is az első lépéssel kezdődik
Ok, velem együtt a piros pirulát választottad, itt maradunk a Csodavilágban, meglátjuk milyen mély a nyúl ürege… . Első lépésben nézzük mit tudhatunk meg az alaptulajdonságokról önmagukban ( ábraérzékenyeknek katt ) az ábrára hivatkozva

• width : a Tartalom téglalap szélességét határozza meg
• height: a Tartalom téglalap magasságát határozza meg
• padding: a Tartalom doboz körülötti terület dimenzióit határozza meg
• border: a padding körülöttét
• margin:a border körülöttét
• background: a padding területen belül meghatározza a hátteret
• overflow: meghatározza, mi történik ha a gyermek túlnő szülőjén ( a szülő Tartalomdobozán)

vizsgáljuk meg ezen tulajdonságokat az egyes box modellek esetében, önmagam szórakoztatására elkészítettem a következő példafájl .

Inline box

másképpen: inline, inline element, és static inline box , bővebben

CSS szemszögéből nézve pedig, sorokba tördelve helyezkednek el jobbról-balra folyva, mindegyik körül burkolóelemként ott van az ‘inline-formatting context’

-nem hat rajtuk a : width,height,overflow,margin-top,margin-bottom
-margin-left/right-border-left/right : az elem pozícióját változtatja az előtte mögötte álló tartalomhoz képest +/- értelemben, csak margin lehet negatív!!
-border-left/right : több sor esetén nem jelenik meg
-boder-top/bottom : megjelenik fent/lent, annélkül hogy változna a line-height, átfedés lehetséges
-padding=border
-line-height : határozza meg a doboz magasságát

Inline block-box

Cserélt elemek (replaced elements) és a kontroll elemek (controls) tartoznak ide, az inline box elemeitől eltérően már rendelkeznek a block box-okra jellemző margin,border,padding beállítási lehetőséggel, ill. ezek hasonlóan hatnak rajtuk. Lehet állítani a szélességüket ill. a magasságukat, ill. ezeket a tulajdonságukat, maguktól, a bennük lévő tartalomtól függően állítják be.

-inline elemekből inline box képezhető display:inline-block, ill. mozilla alatt: display:-moz-inline-box -al
-width,height: beállítja adott elem szélességét, magasságát (kép esetén átméretezi)
auto : visszaállítja eredeti méretét kép esetén/ tartalomra méretezi egyéb esetben
100% : széthúzza ebben az esetben inline block = block
-margin-top/bottom: +/- megnöveli/csökkenti az elem magasságát
-margin-left/right-border-border-padding : az elem pozícióját változtatja az előtte mögötte álló tartalomhoz képest +/- értelemben, csak margin lehet negatív!!
- border-padding-top/bottom: mozilla alatt növeli a line-height-et ie alatt nem tudtam elérni :S

Block box

Block, block elements, static block box. Alapesetben egymás alatt helyezkednek el: normal flow. Tartalmazhatnak: block ill. inline elemeket, Lehet állítani a szélesség, magasság értéküket, ill. ezeket a tulajdonságukat, maguktól, a bennük lévő tartalomtól függően állítják be. Lehetnek nagyobb, kisebbek mint az őket tartalmazó elem. ill. mint a gyermek elemük, az ekkor kialakuló megjelenítést az overflow tulajdonsággal tudjuk beszabályozni.

-width,height magasságát, szélességét állítja be az adott elemnek
-width,height:auto, ez-az alapbeállítás, tartalmazó doboz szélességre ill. tartalom magasságra állítja a doboz magasságát ill. szélességét
-overflow: blokk elemek lehetnek szélessebek, magasabbak mint a tartalmazó dobozuk, ennek megjelenítését tudjuk beállítani
-margin-left/right : elem szélesség(külső) bővíti ill. csökkenti, automatikus tartalomszélességre állítás nem lehetséges
auto: egy elem horizontális beállítását kontrollálja, a szélességek összege (auto-kat a böngésző állítja be) = tartalomdoboz szélessége elven
-margin-top/bottom : blokkokat közelíti távolítja egymástól, átfedés lehetséges, úgylátom teljes káosz a böngészők között – top esetén
-border és padding: kibővíti az elem külső szélességét, széthúzott doboz esetéb a belső doboz mérete csökken, méretezett blokkok esetén eltolja a belső dobozt

folyt. köv. holnap , és jó szórakozást a példafájl + firebuggal, valamint mozilla vs trident-el

Hajrá CSS