033.4 Lecke 1
Tanúsítvány: |
Web Development Essentials |
---|---|
Verzió: |
1.0 |
Témakör: |
033 CSS - A tartalom formázása |
Feladat: |
033.4 CSS Dobozmodell és elrendezés |
Lecke: |
1/1 |
Bevezetés
A HTML-dokumentum minden látható eleme egy téglalap alakú dobozként renderelődik. Így a box model kifejezés a CSS-nek az elemek vizuális tulajdonságait módosító megközelítését írja le. A különböző méretű dobozokhoz hasonlóan a HTML-elemek is beágyazhatók a container elemek — általában a div
elem — belsejébe, így szekciókra lehet őket osztani.
A CSS segítségével módosíthatjuk a dobozok pozícióját, a kisebb kiigazításoktól kezdve az oldalon lévő elemek elrendezésének drasztikus megváltoztatásáig. A normál folyamon kívül az egyes dobozok pozíciója alapulhat a körülöttük lévő elemeken, vagy a szülő konténerhez való viszonyán, vagy a viewport-hoz, vagyis az oldal felhasználó által látható területéhez való viszonyán. Egyetlen mechanizmus sem felel meg az összes lehetséges elrendezési követelménynek, ezért előfordulhat, hogy ezek kombinációjára van szükség.
A normál folyam
Az alapértelmezett mód, ahogy a böngésző megjeleníti a dokumentumfát, a normal flow (normál folyam). Az elemeknek megfelelő téglalapok nagyjából ugyanabban a sorrendben kerülnek elhelyezésre, mint a dokumentumfában, a szülőelemeikhez viszonyítva. Ennek ellenére az elem típusától függően a megfelelő doboz eltérő pozicionálási szabályokat is követhet.
A normál folyam logikájának megértéséhez jó módszer, ha láthatóvá tesszük a dobozokat. Kezdhetjük egy nagyon egyszerű oldallal, amely csak három különálló div
elemet tartalmaz, melyek mindegyikében van egy-egy bekezdés véletlenszerű szöveggel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS doboz modell és elrendezés</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="first">
<h2>Első div</h2>
<p><span>Sed</span> <span>eget</span> <span>velit</span>
<span>id</span> <span>ante</span> <span>tempus</span>
<span>porta</span> <span>pulvinar</span> <span>et</span>
<span>ex.</span></p>
</div><!-- #first -->
<div id="second">
<h2>Második div</h2>
<p><span>Fusce</span> <span>vitae</span> <span>vehicula</span>
<span>neque.</span> <span>Etiam</span> <span>maximus</span>
<span>vulputate</span> <span>neque</span> <span>eu</span>
<span>lobortis.</span> <span>Phasellus</span> <span>condimentum,</span>
<span>felis</span> <span>eget</span> <span>eleifend</span>
<span>aliquam,</span> <span>dui</span> <span>dolor</span>
<span>bibendum</span> <span>leo.</span></p>
</div><!-- #second -->
<div id="third">
<h2>Harmadik div</h2>
<p><span>Pellentesque</span> <span>ornare</span> <span>ultricies</span>
<span>elementum.</span> <span>Morbi</span> <span>vulputate</span>
<span>pretium</span> <span>arcu,</span> <span>sed</span>
<span>faucibus.</span></p>
</div><!-- #third -->
</body>
</html>
Minden szó egy span
elemben van, így a szavakat formázhatjuk, és láthatjuk, hogyan kezeljük őket dobozként is. Ahhoz, hogy a dobozokat láthatóvá tegyük, meg kell szerkesztenünk a HTML-dokumentum által hivatkozott style.css
fájlt. A következő szabályokkal érhetjük el, amire szükségünk van:
* {
font-family: sans;
font-size: 14pt;
}
div {
border: 2px solid #00000044;
}
#first {
background-color: #c4a000ff;
}
#second {
background-color: #4e9a06ff;
}
#third {
background-color: #5c3566da;
}
h2 {
background-color: #ffffff66;
}
p {
background-color: #ffffff66;
}
span {
background-color: #ffffffaa;
}
Az eredmény a Figure 1 ábrán látható.
Az Figure 1 ábra megmutatja, hogy minden HTML-taghez tartozik egy doboz az elrendezésben. A div
, h2
, és p
elemek a szülő szélességéig terjednek. Például a div
elemek szülőeleme a body
elem, tehát a body szélességéig terjednek, míg az h2
és p
elemek szülője a megfelelő div
elem. Azokat a dobozokat, amelyek a szülőelemük szélességéig terjednek, block elemeknek nevezzük. A leggyakrabban blokkokként megjelenített HTML címkék közül néhány: h1
, h2
, h3
, p
, ul
, ol
, table
, li
, div
, section
, form
és aside
. A testvér blokkelemek — olyan blokkelemek, amelyeknek ugyanaz a közvetlen szülőjük — a szülőjükön belül felülről lefelé halmozódnak.
Note
|
Egyes blokkelemek nem lehetnek más blokkelemek tárolói. Lehetséges például, hogy egy blokkelemet egy |
A szövegen kívül az olyan elemek, mint a h1
, p
és li
csak inline elemeket várnak gyerekként. A legtöbb nyugati szkripthez hasonlóan az inline elemek esetén is balról jobbra folyik a szöveg. Ha a jobb oldalon nincs több hely, az inline elem a következő sorban folytatódik, akárcsak a szöveg. Néhány gyakori HTML-tag, amelyet inline dobozként kezelünk, a span
, a
, em
, strong
, img
, input
és label
.
A HTML mintaoldalunkon a bekezdéseken belül minden szót egy span
tagbe raktunk, így azokat egy megfelelő CSS-szabállyal ki lehetett emelni. Amint a képen látható, minden span
elemet vízszintesen, balról jobbra haladva helyezünk el, addig, amíg a szülőelemben már nincs több hely.
Az elem magassága az elem tartalmától függ, így a böngésző a konténerelem magasságát úgy igazítja ki, hogy a benne lévő blokkelemeknek vagy az inline elemek sorainak megfeleljen. Néhány CSS-tulajdonság azonban befolyásolja a doboz alakját, pozícióját és a belső elemek elhelyezését.
A margin
és padding
tulajdonságok minden doboztípusra hatással vannak. Ha nem határozzuk meg őket explicit módon, néhányat a böngésző fog a standard értékekkel beállítani. Ahogy a Figure 1 ábrán látható, a h2
és p
elemek úgy renderelődnek, hogy rés van köztük. Ezek a rések a felső és alsó margók, amelyeket a böngésző alapértelmezés szerint hozzáad ezekhez az elemekhez. Ezeket a h2
és p
szelektorok CSS-szabályainak módosításával tudjuk eltávolítani:
h2 {
background-color: #ffffff66;
margin: 0;
}
p {
background-color: #ffffff66;
margin: 0;
}
Az eredmény a Figure 2 ábrán látható.
margin
tulajdonság megváltoztathatja vagy eltávolíthatja az elemek margóit.A body
elem alapértelmezés szerint egy kis margóval rendelkezik, amely egy hézagot hoz létre körülötte. Ez is eltávolítható a margin
tulajdonság segítségével.
Míg a margin
tulajdonság az elem és környezete közötti távolságot, addig az elem padding
tulajdonsága a konténer határai és a gyermek elemei közötti belső távolságot határozza meg. Vegyük például a h2
és p
elemeket az egyes div
elemeken belül a mintakódban. Használhatnánk a margin tulajdonságukat, hogy a megfelelő div
határaihoz képest rést hozzunk létre, de egyszerűbb a konténer padding
tulajdonságát megváltoztatni:
#second {
background-color: #4e9a06ff;
padding: 1em;
}
Csak a második div
szabályát módosítottuk, így az eredmények (Figure 3) a második div
és a többi div
konténer közötti különbséget mutatják.
div
konténereknek különböző padding-ja lehet.A margin
tulajdonság a doboz négy oldalát szabályozó négy tulajdonság rövidítése: margin-top
, margin-right
, margin-bottom
, és margin-left
. Ha a margin
egyetlen értéket kap, mint az eddigi példákban, akkor a doboz mind a négy margója ezt az értéket használja. Ha két értéket írunk, akkor az első a felső és alsó margót, míg a második a jobb és bal margót határozza meg. A margin: 1em 2em
használata például a felső és alsó margóhoz 1 em, a jobb és bal margóhoz pedig 2 em távolságot határoz meg. Négy érték írásával a négy oldal margóit az óramutató járásával megegyező irányban, a tetejétől kezdve állítjuk be. A rövidített tulajdonságban szereplő különböző értékeknek nem kötelező ugyanazokat a mértékegységeket használniuk.
A padding
tulajdonság is egy rövidítés, amely ugyanazokat az elveket követi, mint a margin
.
Alapértelmezett viselkedésükben a blokkelemek a rendelkezésre álló szélességhez igazodva megnyúlnak, de ez nem kötelező. A width
tulajdonsággal egy fix vízszintes méretet lehet beállítani a dobozhoz:
#first {
background-color: #c4a000ff;
width: 6em;
}
A width: 6em
CSS-szabályhoz való hozzáadása vízszintesen összezsugorítja az első div
-et, üres helyet hagyva a jobb oldalán (Figure 4).
width
tulajdonság megváltoztatja az első div
vízszintes szélességét.Ahelyett, hogy az első div
-t balra igazítva hagynánk, lehet, hogy középre szeretnénk igazítani. Egy doboz középre igazítása egyenértékű azzal, hogy mindkét oldalon azonos méretű margókat állítunk be, így a margin tulajdonságot használhatjuk hozzá. A rendelkezésre álló hely mérete változhat, ezért a bal és jobb oldali margókhoz az auto
értéket használjuk:
#first {
background-color: #c4a000ff;
width: 6em;
margin: 0 auto;
}
A bal és jobb margókat automatikusan számítja ki a böngésző és a doboz középre lesz igazítva (Figure 5).
margin
tulajdonság használata az első div
középre igazításához.Látható, hogy egy blokkelem keskenyebbé tétele nem teszi a fennmaradó helyet elérhetővé a következő elem számára. A természetes áramlás továbbra is megmarad, mintha a keskenyebb elem továbbra is az összes rendelkezésre álló szélességet elfoglalná.
A normál folyam testreszabása
A normál folyma egyszerű és szekvenciális. A CSS segítségével megszakíthatjuk és az elemeket nagyon specifikus módon pozícionálhatjuk, sőt, akár az oldal görgetését is felülbírálhatja, ha szeretnénk. Ebben a részben az elemek pozicionálásának többféle vezérlési módját fogjuk megvizsgálni.
Lebegő elemek
Lehetőség van arra, hogy a testvér blokkelemek ugyanazt a vízszintes teret használják. Ennek egyik módja a float
tulajdonság, amely kiveszi az elemet a normál folyamból. Ahogy a neve is mutatja, a float
tulajdonság a dobozt az utána következő blokkelemek fölött lebegővé teszi, így azok úgy lesznek megjelenítve, mintha a lebegő doboz alatt lennének. Ahhoz, hogy az első div
elemet jobbra lebegtessük, adjuk hozzá a float: right
értéket a megfelelő CSS-szabályhoz:
#first {
background-color: #c4a000ff;
width: 6em;
float: right;
}
Az automatikus margók figyelmen kívül maradnak a lebegő dobozban, tehát a margin
tulajdonságot eltávolíthatjuk. A Figure 6 ábrán láthatjuk az első div
jobbra lebegtetésének az eredményét.
div
lebeg és nem része a normál folyamnak.Alapértelmezés szerint a lebegtetett elem után következő összes blokkelem a lebegtetett elem alá kerül. Ezért elegendő magasság esetén a lebegtetett doboz el fogja fedni az összes többi blokkelemet.
Bár a lebegő elem más blokkelemek fölé kerül, a lebegő elem konténerében lévő soron belüli tartalom körbeöleli a lebegő elemet. Az inspirációt ehhez a magazinok és újságok elrendezései adták, amelyek gyakran tekerik a szöveget például egy kép köré.
Az előző képen látható, hogy az első div
lefedi a második div
-et és a harmadik div
egy részét. Tegyük fel, hogy azt szeretnénk, hogy az első div
a második div
fölött lebegjen, de a harmadik fölött már nem. A megoldás az, hogy a harmadik div
-hez tartozó CSS-szabályba beépítjük a clear
tulajdonságot:
#third {
background-color: #5c3566da;
clear: right;
}
Ha a clear
tulajdonságot right
-ra állítjuk, akkor az elem átugrik minden korábbi, jobbra lebegtetett elemet, és folytatódik a normál folyam (Figure 7).
clear
tulajdonság visszatér a normál folyamhoz.Hasonlóképpen, ha egy előző elem balra van lebegtetve, a clear: left
használatával visszaállíthatjuk a normál folyamot. Ha a bal és jobb oldalon lebegő elemeket is ki akarjuk hagyni, használjuk a clear: both
parancsot.
Dobozok pozicionálása
Normál folyam esetén minden egyes doboz a dokumentumfában az előtte lévő dobozok után következik. Az előző testvérelemek “tolják” az utánuk következő elemeket, jobbra és lefelé mozgatva őket a szülőelemen belül. A szülőelemnek lehetnek saját testvérei, amelyek ugyanezt teszik vele. Olyan ez, mintha egy falon egymás mellé helyeznénk el a csempéket, felülről kezdve.
A dobozok pozicionálásának ezen módját statikusnak (static) nevezzük, és ez a CSS position
tulajdonság alapértelmezett értéke. A margók és a kitöltés meghatározásán kívül nincs mód a statikus dobozok áthelyezésére az oldalon.
A csempék a falon analógiához hasonlóan a statikus elhelyezés nem kötelező. A csempékhez hasonlóan a dobozokat bárhova elhelyezhetjük, akár más dobozokat is eltakarva. Ehhez a position
tulajdonságot a következő értékek egyikére kell beállítani:
relative
-
Az elem követi a dokumentum normál folyamát, de a
top
,right
,bottom
, ésleft
tulajdonságok segítségével az eredeti statikus pozíciójához képest eltolásokat állíthatunk be, amik negatív értéket is felvehetnek. A többi elem az eredeti helyén marad, mintha a relatív elem továbbra is statikus lenne. absolute
-
Az elem figyelmen kívül hagyja a többi elem normál folyamát, és a
top
,right
,bottom
ésleft
tulajdonságok alapján pozícionálja magát az oldalon. Ezek értékei a dokumentum törzséhez vagy egy nem statikus szülő konténerhez viszonyítva értendők. fixed
-
Az elem figyelmen kívül hagyja a többi elem normál folyamát és a
top
,right
,bottom
, ésleft
tulajdonságok alapján pozicionálja magát. Ezek értékei a viewporthoz (azaz ahhoz a képernyőterülethez, ahol a dokumentum megjelenik) képest relatívak. A fixed elemek nem mozognak a látogató görgetesével, egy képernyőre rögzített matricához hasonlítanak leginkább. sticky
-
Az elem követi a dokumentum normál folyamát. Ahelyett azonban, hogy a dokumentum görgetésekor elhagyná a nézetablakot, a
top
,right
,bottom
ésleft
tulajdonságok által meghatározott pozícióban áll meg. Ha például atop
érték10px
, akkor görgetéskor az elem megáll a viewport felső része alatt, amikor eléri a viewport felső határától számított 10 pixelt. Amikor ez megtörténik, az oldal többi része tovább gördül, de a sticky elem ebben a pozícióban fixed elemhez hasonlóan viselkedik. Visszatér az eredeti pozíciójába, amikor a dokumentum visszagördül a nézetablakban elfoglalt helyére. A sticky elemeket manapság gyakran használják olyan felső menük létrehozására, amelyek mindig láthatóak.
A top
, right
, bottom
, és left
tulajdonságokat használó pozícióknak nem kell mindegyiket használni. Ha például egy abszolút elem top
és height
tulajdonságát is beállítjuk, a böngésző implicit módon kiszámítja a bottom
tulajdonságát (top + height = bottom).
A display
tulajdonság
Ha a normál folyam által megadott sorrend nem jelent problémát a tervezés során, de szeretnénk megváltoztatni a dobozok elrendezését az oldalon, módosítsuk az elem display
tulajdonságát. A display
tulajdonság segítségével akár teljesen eltüntethetjük az elemet a megjelenített dokumentumból, ha beállítjuk a display: none
értéket. Ez akkor hasznos, ha az elemet később JavaScript segítségével szeretnénk megjeleníteni.
A display
tulajdonsággal például egy blokk elem is viselkedhet úgy, mint egy inline elem (display: inline
). Ezt azonban nem tekintjük jó gyakorlatnak. Léteznek jobb módszerek a konténerelemek egymás mellé helyezésére, például a flexbox modell.
A flexbox modellt azért találták ki, hogy leküzdjék a lebegtetés korlátait és megszabaduljanak attól a gyakorlattól, hogy táblázatokat használjanak az oldal elrendezésének strukturálásához. Ha egy konténerelem display
tulajdonságát flex
-re állítjuk, hogy flexbox konténerré alakítsuk, a közvetlen gyerekei többé-kevésbé úgy fognak viselkedni, mint egy táblázatsor cellái.
Tip
|
Ha még nagyobb kontrollt szeretnénk az elemek elhelyezésének ellenőrzéséhez, vessünk egy pillantást a CSS grid funkcióra. A grid (rács) egy hatékony, sorokon és oszlopokon alapuló rendszer, amellyel bonyolult elrendezéseket hozhatunk létre. |
A flex (rugalmas) megjelenítés teszteléséhez adjunk hozzá egy új div
elemet a példaoldalunkhoz és tegyük azt a meglévő három div
elem konténerévé:
<div id="container">
<div id="first">
<h2>Első div</h2>
<p><span>Sed</span> <span>eget</span> <span>velit</span>
<span>id</span> <span>ante</span> <span>tempus</span>
<span>porta</span> <span>pulvinar</span> <span>et</span>
<span>ex.</span></p>
</div><!-- #first -->
<div id="second">
<h2>Második div</h2>
<p><span>Fusce</span> <span>vitae</span> <span>vehicula</span>
<span>neque.</span> <span>Etiam</span> <span>maximus</span>
<span>vulputate</span> <span>neque</span> <span>eu</span>
<span>lobortis.</span> <span>Phasellus</span> <span>condimentum,</span>
<span>felis</span> <span>eget</span> <span>eleifend</span>
<span>aliquam,</span> <span>dui</span> <span>dolor</span>
<span>bibendum</span> <span>leo.</span></p>
</div><!-- #second -->
<div id="third">
<h2>Harmadik div</h2>
<p><span>Pellentesque</span> <span>ornare</span> <span>ultricies</span>
<span>elementum.</span> <span>Morbi</span> <span>vulputate</span>
<span>pretium</span> <span>arcu,</span> <span>sed</span>
<span>faucibus.</span></p>
</div><!-- #third -->
</div><!-- #container -->
Adjuk hozzá a következő CSS-szabályt a stíluslaphoz, hogy a konténer div
flexbox konténer legyen:
#container {
display: flex;
}
Az eredmény a három belső div
elem egymás mellé renderelve (Figure 8).
Az inline-flex
érték használata a flex
helyett alapvetően ugyanazt az eredményt hozza, de a gyerekek inkább inline elemként viselkednek.
Reszponzív design
Tudjuk, hogy a CSS olyan tulajdonságokat biztosít, amelyek az elemek és betűtípusok méretét a rendelkezésre álló képernyőterülethez viszonyítva módosítják. Azonban előfordulhat, hogy ennél többet akarunk, és különböző eszközök esetén eltérő dizájnt szeretnénk használni: például az asztali számítógépek és a bizonyos kisebb képernyőméretű eszközök között. Ezt a megközelítést reszponzív webdizájnnak nevezik, és a CSS a media queries nevű módszerekkel teszi ezt lehetővé.
Az előző példában úgy módosítottuk az oldal elrendezését, hogy a div
elemeket egymás mellett, oszlopokban helyeztük el. Ez az elrendezés nagyobb képernyők esetén megfelelő, de kisebb képernyőkön túlságosan zsúfolt lesz. A probléma megoldásához hozzáadhatunk egy media query-t a stíluslaphoz, amely csak a legalább 600px
szélességű képernyők esetén lép életbe:
@media (min-width: 600px){
#container {
display: flex;
}
}
A @media
direktíván belüli CSS-szabályok csak akkor kerülnek alkalmazásra, ha a zárójelben lévő feltételek teljesülnek. Ebben a példában, ha a a viewport szélessége kisebb, mint 600px
, a szabály nem kerül alkalmazásra a konténer div
esetén és a gyerekei hagyományos div
elemként kerülnek megjelenítésre. A böngésző minden alkalommal újraértékeli a media query-ket, amikor a viewport mérete megváltozik, így az elrendezés valós időben módosítható a böngészőablak méretének megváltoztatása vagy az okostelefon forgatása közben.
Gyakorló feladatok
-
Ha nem módosítjuk a
position
tulajdonságot, milyen pozicionálási módszert fog használni a böngésző? -
Hogyan lehet biztosítani, hogy egy elem doboza a korábban lebegtetett elemek után kerüljön megjelenítésre?
-
Hogyan használhatjuk a rövidített
margin
tulajdonságot, hogy a felső/alsó margók4px
, a jobb/bal oldali margók pedig6em
értékűek legyenek? -
Hogyan lehet egy fix szélességű statikus konténerelemet vízszintesen középre helyezni az oldalon?
Gondolkodtató feladatok
-
Írjunk egy CSS-szabályt, amely a
<div class="picture">
elemre illeszkedik úgy, hogy a szöveg a következő blokkelemeken belül a jobb oldalra kerüljön! -
Hogyan befolyásolja a
top
tulajdonság a statikus elemet a szülő elemhez képest? -
Hogyan befolyásolja egy elem
display
tulajdonságánakflex
-re történő módosítása az elem elhelyezését a normál folyamban? -
Melyik CSS-funkció teszi lehetővé, hogy a böngésző a képernyő méreteitől függően külön szabálykészletet használjon?
Összefoglalás
Ez a lecke a CSS dobozmodellről és annak testreszabásáról szól. A dokumentum normál folyamán kívül a dizájner különböző pozicionálási mechanizmusokat is felhasználhat az egyéni elrendezés megvalósításához. Ez a lecke a következő fogalmakat és eljárásokat veszi át:
-
A dokumentum normál folyama.
-
Egy elem dobozának margin és padding tulajdonságainak beállítása.
-
A float és clear tulajdonságok használata.
-
Pozicionálási mechanizmusok: static, relative, absolute, fixed és sticky.
-
A
display
tulajdonság alternatív értékei. -
A reszponzív dizájn alapjai.
Válaszok a gyakorló feladatokra
-
Ha nem módosítjuk a
position
tulajdonságot, milyen pozicionálási módszert fog használni a böngésző?A
static
módszert. -
Hogyan lehet biztosítani, hogy egy elem doboza a korábban lebegtetett elemek után kerüljön megjelenítésre?
Az elem
clear
tulajdonságának értéke legyenboth
. -
Hogyan használhatjuk a rövidített
margin
tulajdonságot, hogy a felső/alsó margók4px
, a jobb/bal oldali margók pedig6em
értékűek legyenek?Lehet
margin: 4px 6em
vagymargin: 4px 6em 4px 6em
. -
Hogyan lehet egy fix szélességű statikus konténerelemet vízszintesen középre helyezni az oldalon?
Az
auto
értéket kell megadni amargin-left
ésmargin-right
tulajdonságoknak.
Válaszok a gondolkodtató feladatokra
-
Írjunk egy CSS-szabályt, amely a
<div class="picture">
elemre illeszkedik úgy, hogy a szöveg a következő blokkelemeken belül a jobb oldalra kerüljön!.picture { float: left; }
-
Hogyan befolyásolja a
top
tulajdonság a statikus elemet a szülő elemhez képest?A
top
tulajdonság nem használható statikus elemek esetén. -
Hogyan befolyásolja egy elem
display
tulajdonságánakflex
-re történő módosítása az elem elhelyezését a normál folyamban?Magának az elemnek az elhelyezése nem változik, de a közvetlen gyerek elemei vízszintesen egymás mellett lesznek megjelenítve.
-
Melyik CSS-funkció teszi lehetővé, hogy a böngésző a képernyő méreteitől függően külön szabálykészletet használjon?
A media query-k lehetővé teszik a böngésző számára, hogy ellenőrizze a viewport méreteit a CSS-szabály alkalmazása előtt.