CSS
HTML
COMPONENTS
CODE HUB
CSS Display Generator
Konfiguráció
Megjelenítés típusa
Osztály
Előnézet
Box 1
Box 2
Box 3
Kód
ReadyTools Academy
Tanulj HTML-t, CSS-t és JavaScriptet teljesen ingyen a ReadyTools Academy keretében.
Kövesd a tanulásodat, fejlődj a saját tempódban, és szórakozz közben! 🎯
Kezdj beleCSS Display Generator
A CSS-ben a "display" tulajdonsággal szabályozható, hogy egy HTML-elem hogyan jelenjen meg a webböngészőben. Meghatározza a HTML-elemhez használt doboz típusát, ami viszont befolyásolja az elem pozicionálását, méretét és viselkedését a dokumentumáramlásban. A "display" tulajdonság különböző értékeket fogad el, amelyek mindegyike más-más megjelenítési viselkedést határoz meg. A display tulajdonság néhány gyakori értéke a következő:
- block: Ez az érték az elemet blokkszintű elemmé teszi. A blokkszintű elemek általában egy új sorban kezdődnek, és a rendelkezésre álló vízszintes helyet kitöltve bővülnek. A blokkszintű elemekre példa a <div>, <p> és <h1>.
- inline: Ez az érték az elemet inline szintű elemmé teszi. Az inline szintű elemek nem kezdődnek új sorban, és csak annyi szélességet foglalnak el, amennyi szükséges. Az inline-szintű elemekre példa a <span>, <a> és <strong>.
- inline-block: Ez az érték egyesíti a blokkszintű és az inline-szintű elemek jellemzőit. Lehetővé teszi, hogy az elem más tartalmakkal egy vonalban folyjon, miközben szélességet és magasságot állíthat be, valamint margókat és kitöltést kaphat.
- nincs: Ez az érték teljesen elrejti az elemet a megjelenítés elől, láthatatlanná teszi, és nem foglal helyet a dokumentumfolyamban. Gyakran használják az elemek dinamikus elrejtésére vagy megjelenítésére JavaScript segítségével.
- flex: Ez az érték az elemet flex konténerré alakítja, lehetővé téve a flexbox elrendezési modell használatát a gyermekei számára.
- grid: Ez az érték az elemet rácsos tárolóvá alakítja, lehetővé téve a CSS rácsos elrendezés használatát a gyermekei számára.
Íme egy példa a "display" tulajdonság használatára:
.block-element {
display: block;
}
.inline-element {
display: inline;
}
.inline-block-element {
display: inline-block;
}
.hidden-element {
display: none;
}
A "display" tulajdonság egy alapvető CSS tulajdonság, amely döntő szerepet játszik a HTML-elemek elrendezésének és megjelenítésének szabályozásában egy weboldalon. Egy elem megfelelő "display" értékének kiválasztása jelentősen befolyásolhatja annak megjelenését és viselkedését.