A CSS használata a HTML elemek elhelyezéséhez

• Lehet 10, 2024

A CSS-szabályok lehetővé teszik, hogy a HTML elemeket pontosan oda tudja helyezni, ahol szeretné. Beállíthatja, hogy miként reagálnak a körülöttük lévő más elemekre, vagy akár teljesen elrejtse őket. Itt található a CSS elhelyezési tulajdonságainak bontása.

Megjelenítés: Ez a tulajdonság meghatározza az elem megjelenítésének módját. Ha a kijelzőt "nincs" -re állítja, az elemet teljesen elrejti, míg más értékek megváltoztathatják, hogy az elem hogyan reagál más tulajdonságokra és elemekre. Például a divs alapértelmezés szerint "blokk "ként jelenik meg, azaz téglalap alakú objektumként működik, de a" display: inline "funkcióval arra kényszerítheti, hogy a div egy bekezdésként viselkedjen. Vagy megteheti az ellenkezőjét, és a "display: block" használatával kényszerítheti egy bekezdést úgy, mint egy div.

Pozíció: meghatározza, hogyan reagál az elem az azt körülvevő elemekre. Az elemek alapértelmezés szerint a "pozíció: statikus" kifejezést használják, ami azt jelenti, hogy sorrendben jelennek meg, ahogy a HTML-kódban megjelennek. A "Pozíció: relatív" azt jelenti, hogy az elem statikus helyzetét kiszámítják, majd azt ellensúlyozzák, amit a "felső" és a "bal" tulajdonságban jelez. A többi oldal elem úgy viselkedik, mintha a relatív elem még mindig statikus helyzetében lenne. A "Pozíció: abszolút" elemek figyelmen kívül hagyják statikus helyzetüket, pozíciójukat kizárólag a felső, bal, jobb és alsó tulajdonságok értékeire alapozzák. Ezenkívül más elemek figyelmen kívül hagyják ezt az elemet (tehát ha nem vagy óvatos, akkor rendetlen átfedésekkel járhat). A "Pozíció: rögzített" hasonlít a "pozíció: abszolút" kifejezésre, azzal az eltéréssel, hogy az elem akkor is megtartja a helyét, ha a látogató az oldalt görgetti.

Láthatóság: Dönti el, hogy egy elem megjelenik-e az oldalon vagy sem. A "megjelenítés: nincs" és a "láthatóság: rejtett" közötti különbség az, hogy az első esetben a többi oldal elem úgy viselkedik, mintha a láthatatlan objektum nem létezik; utóbbi esetben más elemek fognak helyet foglalni a rejtett elem számára. Nyilvánvaló, hogy az alapértelmezett beállítás "látható".

Úszó: Beállíthatja, hogy az elem más elemek balról vagy jobbról lépcsőződik-e el (vagy nem egységenként lép fel, ami alapértelmezett). Ez a tulajdonság rendkívül hasznos a relatív elemek helyes elhelyezkedésében. Minden úszó elemnek szélességet kell beállítania, különben nem jelenik meg megfelelően. Továbbá, ha egy elemhez úszót használ, akkor valószínűleg beállítani szeretné a tulajdonságot az összes elem körül.

Tiszta: Ez a tulajdonság együtt működik a "float" tulajdonsággal. Dönti el, hogy az elem miként hagyja, hogy más elemek lebegjenek körülötte - „tiszta: bal”: azt jelenti, hogy semmilyen más elem nem képes balra úszni; A "tiszta: jobb" blokkolja a jobb oldalt, és a "tiszta: mindkettő" azt jelenti, hogy egyetlen elem sem tud lebegni egyik oldalra sem. Az alapértelmezett beállítás "tiszta: nincs" (azaz más elemek mindkét oldalán lebeghetnek).

Video Utasításokat: HTML5 tanfolyam - alapok - a CSS alapjai (Lehet 2024).