CSS dobozmodell
1. Mi a dobozmodell?
A CSS dobozmodell írja le, hogy a böngésző hogyan jeleníti meg az elemeket. Minden HTML elem egy téglalapként (dobozként) jelenik meg, amely a következő részekből áll (kívülről befelé):
- Margó (margin) - külső térköz
- Szegély (border) - keret
- Belső margó (padding) - belső térköz
- Tartalom (content) - maga az elem tartalma
Vizuális megjelenítés:
+------------------------+
| MARGIN |
| +----------------+ |
| | BORDER | |
| | +----------+ | |
| | | PADDING | | |
| | | +--+ | | |
| | | | | | | |
| | | +--+ | | |
| | |CONTENT | | |
| | +----------+ | |
| +----------------+ |
+------------------------+
2. A dobozmodell részei
1. Tartalom (Content)
div {
width: 200px; /* szélesség */
height: 100px; /* magasság */
}
2. Belső margó (Padding)
div {
padding: 20px; /* minden oldalon 20px */
padding: 10px 20px; /* fent-lent 10px, jobb-bal 20px */
padding: 10px 20px 15px 25px; /* fent, jobb, lent, bal */
/* Vagy külön-külön: */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;
}
3. Szegély (Border)
div {
border: 1px solid black; /* vastagság stílus szín */
/* Vagy részletesen: */
border-width: 1px;
border-style: solid; /* solid, dotted, dashed, double stb. */
border-color: black;
/* Egy oldal külön: */
border-top: 1px solid black;
border-right: 2px dashed red;
border-bottom: 3px dotted blue;
border-left: 4px double green;
}
4. Margó (Margin)
div {
margin: 20px; /* minden oldalon 20px */
margin: 10px 20px; /* fent-lent 10px, jobb-bal 20px */
margin: 10px 20px 15px 25px; /* fent, jobb, lent, bal */
/* Vagy külön-külön: */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 25px;
}
3. Box-sizing tulajdonság
Az alapértelmezett dobozmodell (content-box)
div {
width: 200px;
padding: 20px;
border: 1px solid black;
/* Teljes szélesség = 200px + 40px + 2px = 242px */
}
Modern dobozmodell (border-box)
div {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid black;
/* Teljes szélesség = 200px */
}
4. Elemek méretezése
Fix méret
div {
width: 200px;
height: 100px;
}
Minimum és maximum méretek
div {
min-width: 100px;
max-width: 500px;
min-height: 50px;
max-height: 300px;
}
Relatív méretek
div {
width: 50%; /* szülő elem szélességének 50%-a */
width: 20vw; /* viewport szélesség 20%-a */
height: 50vh; /* viewport magasság 50%-a */
}
5. Túlcsordulás kezelése
Overflow tulajdonság
div {
width: 200px;
height: 100px;
overflow: visible; /* alapértelmezett - túllóg */
overflow: hidden; /* levágja a túllógó részt */
overflow: scroll; /* görgetősáv mindig */
overflow: auto; /* görgetősáv ha kell */
}
6. Gyakorlati példák
1. Kártya komponens
.card {
width: 300px;
padding: 20px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.card img {
width: 100%;
height: auto;
margin-bottom: 10px;
}
2. Központosított konténer
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
7. Jó gyakorlatok
- Box-sizing használata
/* Alkalmazzuk minden elemre */
* {
box-sizing: border-box;
}
- Margók összeomlása (margin collapse)
- Függőleges margók összeolvadnak
- A nagyobb margó érvényesül
/* Használjunk padding-ot margó helyett, ha el akarjuk kerülni */
.elem {
padding-top: 20px;
padding-bottom: 20px;
}
- Relatív méretek használata
.responsive-elem {
max-width: 100%;
height: auto;
}
8. Gyakori hibák és megoldásaik
- Váratlan teljes szélesség
/* Probléma */
.box {
width: 100px;
padding: 20px;
border: 1px solid black;
}
/* Megoldás */
.box {
box-sizing: border-box;
width: 100px;
}
- Margók összeomlása
/* Probléma */
.elem1 { margin-bottom: 20px; }
.elem2 { margin-top: 20px; }
/* Megoldás */
.elem1 { margin-bottom: 20px; }
.elem2 { padding-top: 20px; }
9. Gyakorló feladatok
1. Alapfeladat
Készíts egy kártya komponenst:
- Fix szélesség
- Padding minden oldalon
- Vékony szegély
- Lekerekített sarkok
- Középre igazított tartalom
2. Haladó feladat
Készíts egy reszponzív galériát:
- Flexibilis szélesség
- Maximum szélesség beállítása
- Megfelelő térközök az elemek között
- Túlcsordulás kezelése
10. Ellenőrző kérdések
- Mik a dobozmodell fő részei?
- Mi a különbség a content-box és border-box között?
- Hogyan lehet egy elemet vízszintesen középre igazítani margókkal?
- Mikor érdemes relatív méreteket használni?
- Mit jelent a margók összeomlása?
A következő leckékben a különböző pozicionálási módszerekkel és a flexbox layouttal fogunk foglalkozni, amelyek segítenek az elemek pontos elhelyezésében a weboldalon.