Az alap div blokk elrendezése

Előző

Tartalom

  • A DIV címke és a float tulajdonság
  • Az egyértelmű tulajdonság
  • Behúzások a blokk elrendezésben

Bármely weboldal a rajta elhelyezkedő elemekből áll, és ezek elhelyezéséért szinte mindig a blokk elrendezés div felelős. Természetesen létezik táblázatos elrendezés is

címkék használatával, ,
, és még arról is viták vannak, hogy melyik a jobb blokk- vagy táblázatos rendszer használata. A valóságban azonban jelenleg nem találkozik a modern, népszerű és kényelmes webhelyekkel, amelyek csak táblázatos elrendezést használnak. A legjobb esetben csak arra használjuk, amire szánták - vagyis táblázatok készítésére, de nem magának az oldal szerkezetének kialakítására.

A helyzet az, hogy a webhely div elrendezése lehetővé teszi számos css tulajdonság beállítását, amelyek nem állnak rendelkezésre a táblákhoz. Emellett a táblázatrendszer fő hátránya, hogy a táblázat addig nem jelenik meg a képernyőn, amíg a böngésző teljesen be nem tölti. Ha a teljes oldal egy táblázatban készült, akkor az csak az oldal teljes html kódjának teljes betöltése után jelenik meg a kijelzőn.

alap

A DIV címke és a float tulajdonság

A blokkrendszer alapja egy címke, amely egy tartalomtároló. Más tartályokat is tartalmazhat.

A DIV címke használata nem bonyolultabb, mint az MP3 címkék szerkesztése. A webhely szabványos szerkezete általában a következőképpen alakul: van egy fő tároló (gyakran hozzárendelnek egy wrapper, konténer, fő stb. nevű osztályt). Ebben a tárolóban találhatók a menü blokkjai, a tematikus rész és az oldalsáv.

Alapértelmezés szerint minden új blokk egy új sorba kerül. Annak érdekében, hogy egy blokkot balra vagy jobbra helyezzen elegyébként (például az oldalsáv jobb oldali elhelyezéséhez) a float tulajdonságot használjuk. Alapértelmezés szerint a "nincs" értéke van, de beállíthatja a "bal" és a "jobb" értékeket is.

Tekintsük ezt a tulajdonságot egy két blokkos példával.

Letiltás a tartalomért Blokk az oldalsávhoz

Ez a kód a következő kimenetet produkálja:

Az egyértelmű tulajdonság

Fontos figyelembe venni, hogy a float tulajdonság nem csak magára a blokkra vonatkozik, amelybe be van írva, hanem a következő elemre is, amely ezt a blokkot követi. Vagyis ha a fent leírt két blokkhoz adunk még egy blokkot anélkül, hogy tulajdonságot adnánk meg, akkor az nem egy új sorban fog elhelyezkedni, hanem a második blokktól jobbra indul.

Ennek elkerülése érdekében a blokk elrendezés div a clear tulajdonságot használja, amelyet az új sorból elhelyezni kívánt blokkhoz kell beállítani. Leggyakrabban erre a "mindkettő" értékre van állítva, de beállíthatjuk a "bal" vagy "jobb" értéket is, ha nem csak a blokkot akarjuk új sorba helyezni, hanem az igazítását is. .

Adjunk hozzá egy új elemet a fenti példához:

Letiltás a tartalomért Letiltás az oldalsávhoz Alul egy új blokk található

Eredmény:

Behúzások a blokk elrendezésben

A blokkok elhelyezkedése mellett fontos a behúzások hozzárendelése mind a blokkok között, mind azokon belül. Ehhez a margó és a padding tulajdonságokat használják.

A behúzások külön vannak beállítva az elem felső, jobb, alsó és bal oldali részére. Egy sorban adhatók meg négy érték felsorolásával:

margó: 20 képpont 10 képpont 0 40 képpont

Az ilyen paraméterekkel rendelkező blokk 20 képponttal a legmagasabb elem alatt helyezkedik el, tíz pixelre az álló elemtől,alulról nulla kitöltés lesz, balról pedig 40 képpontos margó lesz.

Ha ugyanazok a mutatók vannak megadva a kitöltés tulajdonságban, akkor ezek lesznek a tartalom belső behúzásai annak a blokknak a határaihoz képest, amelyben az található.

Az egyes oldalak egyedi tulajdonságait is beállíthatja a margó-felső margó-alsó, margó-bal, margó-jobb (és hasonlóképpen a kitöltés) használatával. Ebben az esetben, ha az egyik oldal nincs megadva, akkor az oldalán lévő behúzás nulla lesz, vagy az oldalon lévő blokkokhoz megadott általános css tulajdonságok határozzák meg.

Következő

Olvassa el tovabba: