Doboz modell

Tömbszerű (vagy blokkos) elemek jellemzői

A blokkos elemek vízszintesen kitöltik, a rendelkezésre álló helyet, mellettük más elem nem lehet, az elem maga előtt és után sortörést hoz létre. Magasságuk a tartalmuktól függ, a tartalom tolja szét a blokkos elemeket függőlegesen.
A böngészők blokkos elemként jelenítik meg az ebbe a kategóriába tartozó HTML elemeket - lásd HTML elemek listája.
CSS-el fel lehet ruházni ezzel a megjelenítési móddal a nem blokkos elemeket is.
1
span {
2
display: block;
3
}
Copied!

Tartalom - content

Ha külön nem határozzuk meg egy blokkos elem szélességét, és magasságát, az elem 100% széles lesz, vízszintesen teljesen kitölti a rendelkezésre álló helyet. Az elem magasságát a tartalma határozza meg, például a benne lévő szöveg. Tartalom hiányában az elem 0px magasságú.
A blokkos elemeknek megadhatjuk a szélességégét, magasságát a width és a height CSS tulajdonságokkal, ez felülbírálja az alapbeállításokat, az elem magassága függetlenül méretezhető a tartalmától, szélessége függetlenül méretezhető a rendelkezésre álló helytől.
Alapestben a böngésző határozza meg a width és height értékét, ez az auto, vagyis a fentebb taglalt elvek alapján számítja a szélességet, és magasságot.
1
div {
2
width: 60%; /* szélesség */
3
height: 640px; /* magasság */
4
}
Copied!
A szélességnek, és a magasságnak megadhatunk minimum és maximum értéket is:
1
div {
2
min-width: 15%; /* legkissebb szélesség */
3
min-height: 15em; /* legkisebb magasság */
4
max-width: 125px; /* legnagyobb szélesség */
5
max-height: 55%; /* legnagyobb magasság */
6
}
Copied!
A min-height, és min-width CSS tulajdonságokban meghatározott érték alá nem csökken az elem szélessége és magassága (alapértéke 0px).
A max-height, és max-width CSS tulajdonságokban meghatározott érték fölé nem növekszik az elem szélessége és magassága (alapértéke none, vagyis nincs felső méret korlát).

Belső margó - padding

A blokkos elemeknek meg lehet adni belső margót a padding CSS tulajdonsággal, ez felveszi a háttér színét, és belső eltartása hozzáadódik a tartalom szélességéhez és magasságához (alapértéke 0px), a tartalom és az oldal széle között képezve eltartást (úgy kell elképzelni, mint egy hagyományos képkeret esetén a paszpartut a festmény és maga a képkeret között).
A belső margó a tartalom, és az elem széle között képez eltartást.
A padding -et megadhatjuk külön külön oldalanként, a padding-top, padding-right, padding-bottom és badding-left CSS tulajdonságokkal:
1
div {
2
padding-top: 10px; /* Felső padding */
3
padding-right: 20px; /* Jobb padding */
4
padding-bottom: 3em; /* Alsó padding */
5
padding-left: 15%; /* Bal padding */
6
}
Copied!
Vagy gyorsírásos módszerrel, felsorolhatjuk az összes oldalt is (fentről kezdve az óra járásával megegyező irányban következnek az oldalak):
1
div {
2
/* Gyorsírásos padding oldalankén különböző értékkel */
3
padding: 10px 5px 3px 1px;
4
}
Copied!
Meghatározhatjuk egy érték megadásával az összes oldal padding értékét is, feltételezve, hogy az összes oldal belső margójának mérete megegyezik:
1
div {
2
padding: 3em; /* Gyorsírásos padding */
3
}
Copied!

Keret - border

A blokkos elemeknek lehet kerete, a keret megjelenik vizuálisan, és hozzáadódik az elem magasságához és szélességéhez. Ha a keretnek vannak átlátszó részei az elem háttere látszódik ezeken a területeken.
A belső margón kívül helyezkedik el a keret (jelen esetben vörös színnel).

Keret stílus

A border-style (keret stílus) tulajdonsággal határozhatjuk meg a keret vizuális megjelenését (alapértéke a none, vagyis nincs keret).
Lehetséges értékei:
  • none, hidden - nincs keret
  • solid - folytonos vonal
  • dotted - pontozott
  • dashed - szaggatott vonal
  • double - dupla vonal
  • outset - kiemelkedő
  • inset - süllyesztett
  • groove - bemélyített
  • ridge - kidomborodó
1
div {
2
border-top-style: none; /* Felső keret stílus */
3
border-right-style: solid; /* Jobb keret stílus */
4
border-bottom-style: dotted; /* Alsó keret stílus */
5
border-left-style: dashed; /* Bal keret stílus */
6
}
Copied!
A keret stílust is megadhatjuk gyorsírásos formában (fentről kezdve az óra járásával megegyező irányban következnek az oldalak):
1
div {
2
/* Gyorsírásos keret stílus oldalanként különböző értékekkel */
3
border-style: solid none dotted dashed;
4
}
Copied!
Lehetőség van az összes oldal keretének border-style értékét is beállítani egy értékkel, feltételezve, hogy az összes oldal keret stílusa megegyezik:
1
div {
2
border-style: solid; /* Gyorsírásos keret stílus */
3
}
Copied!

Keret szélesség

A border-width (keret szélesség) tulajdonságnak az értéke adja a keret vastagságát. Negatív értéket nem vehet fel (alapértéke medium, vagyis közepes).
1
div {
2
border-top-width: 1px; /* Felső keret szélesség */
3
border-right-width: 1em; /* jobb keret szélesség */
4
border-bottom-width: 5px; /* Alsó keret szélesség */
5
border-left-width: 1.2rem; /* Bal keret szélesség */
6
}
Copied!
A keret szélesség megadható gyorsírásos formában, oldalanként eltérő értékkel (fentről kezdve az óra járásával megegyező irányban következnek az oldalak):
1
div {
2
/* Gyorsírásos keret szélesség oldalanként különböző értékekkel */
3
border-width: 1px 2px 3px 4px;
4
}
Copied!
Egy értékkel meghatározva is megadhatjuk az összes oldal keret szélességét, feltételezve, hogy minden oldalon megegyezik az értéke:
1
div {
2
border-width: 15px; /* Gyorsírásos keret szélesség */
3
}
Copied!

Keret szín

A border-color a keret színét határozza meg. Értéke lehet bármely CSS színrendszer szerinti szín (alapértéke felveszi a szövegszínt, vagyis a color tulajdonságban meghatározott színt).
1
div {
2
border-top-color: rgba(255, 0, 0); /* Felső keret szín */
3
border-right-color: green; /* Jobb keret szín */
4
border-bottom-color: #0000ff; /* Alsó keret szín */
5
border-left-color: #ff0; /* Bal keret szín */
6
}
Copied!
Oldalanként eltérő keret szín.
A keret színt is megadhatjuk gyorsírásos formában (fentről kezdve az óra járásával megegyező irányban következnek az oldalak):
1
div {
2
/* Gyorsírásos keret szín oldalanként eltérő színnel */
3
border-color: #e1e1e1 #d3d3d3 #d4d4d4 #e2e2e2;
4
}
Copied!
Meghatározhatjuk egy érték megadásával az összes oldal border-color értékét is, feltételezve, hogy az összes oldal keretének színe megegyezik:
1
div {
2
border-color: purple; /* Gyorsírásos keret szín */
3
}
Copied!

Gyorsírásos keret

Gyorsírásos módszerrel megadhatjuk oldalanként a kereteket, ehhez meg kell adnunk a keret színét, stílusát és szélességét szóközökkel elválasztva border-top, border-right, border-bottom vagy border-left CSS tulajdonságokban meghatározva:
1
div {
2
border-top: 5px solid black; /* Gyorsírásos felső keret */
3
border-right: none; /* Gyorsírásos jobb keret */
4
border-bottom: 3px double #449b44; /* Gyorsírásos alsó keret */
5
border-left: 1px dashed red; /* Gyorsírásos bal keret */
6
}
Copied!
Egy még kompaktabb megoldás, amikor az összes oldal keretét egy border tulajdonságban írjuk le, feltételezve, hogy a keret minden oldalon egyező stílussal színnel, és vastagsággal rendelkezik:
1
div {
2
border: 1px solid purple; /* Gyorsírásos keret */
3
}
Copied!

Külső margó - margin

A margin, vagy külső margó az elemek közötti eltartást határozza meg. Értéke lehet negatív, ebben az esetben egymásra csúsznak az elemek. Alapértéke 0px.
1
div {
2
margin-top: 1.25em; /* Felső margó */
3
mergin-right: auto; /* Jobb margó */
4
margin-bottomm: 33px; /* Alsó margó */
5
margin-left: -25px; /* Bal margó */
6
}
Copied!
Ebben a példában a gyermek elem margója függőlegesen szétnyomja a szülő elemet.
A margin esetében is van gyorsírásos variáns, oldalanként külön értékkel (fentről kezdve az óra járásával megegyező irányban következnek az oldalak):
1
div {
2
/* Gyorsírásos margin oldalankén különböző értékkel */
3
margin: 0 auto 15px auto;
4
}
Copied!
Be tudjuk állítani egy érték megadásával az összes oldal margin értékét is, feltételezve, hogy az összes oldal margójának mérete megegyezik:
1
div {
2
margin: 3em; /* Gyorsírásos margin */
3
}
Copied!
A margin-nak van egy speciális értéke, ez az auto, vagy automatikus margó, ha ezt vízszintesen, vagyis jobb és, vagy bal oldalt megkapja egy elem, a margója az adott oldalon addig nyúlik, amíg a rendelkezésre álló hely el nem fogy. Ez lehetővé teszi, hogy automatikus margóval balra, középre, vagy jobbra rendezzük a blokkos megjelenítésű elemeket.
1
div {
2
margin-top: 50px;
3
margin-right: 50px;
4
margin-bottom: 50px;
5
margin-left: auto; /* Jobbra tolja az elemet */
6
}
Copied!
Ebben a példában a bal oldali auto margin jobbra tolja az elemet.
1
div {
2
margin-top: 50px;
3
margin-bottom: 50px;
4
/* A bal és jobb oldali auto margin középre rendezi az elemet: */
5
margin-right: auto;
6
margin-left: auto;
7
}
Copied!
A bal és jobb oldali auto margin vízszintesen középre rendezi az elemet.
Az auto margin számos CSS megoldás alapját képezi, lásd:
Alapesetben függőlegesen hatástalan az automatikus margó, ha egy elem margin-top vagy margin-bottom tulajdonságát auto-ra állítjuk, akkor a böngésző azt nullának fogja venni, ez alól kivételt képez a flex (rugalmas) megjelenítési mód, ahol a rugalmas elemekre vertikálisan is alkalmazható az automatikus margó.

Doboz méretezése - box-sizing

A box-sizing tulajdonság alapján számolja a böngésző az elemek méretét.
Két lehetséges értéke lehet, az alapérték a content-box ebben az estben az elem tartalmának szélességéhez, magasságához hozzáadódik a belső margó és a keret szélessége, magassága.
Sötétebb kékkel a padding, és a border, alapestben ezek hozzáadódnak az elem szélességéhez (fehér nyilakkal jelölve).
1
div {
2
box-sizing: content-box;
3
}
Copied!
A box-sizing tulajdonság második lehetséges értéke a border-box, amikor a szélességbe, és magasságba beleszámít a belső margó és a keret szélessége, magassága.
Border-box esetében a padding, és a border nem növeli az elem méretét, befelé képződik (fehér nyilakkal jelölve).
1
div {
2
box-sizing: border-box;
3
}
Copied!

Ábra

Last modified 2yr ago