Mi a display tulajdonság fő jelentése a CSS-ben, és…

A display tulajdonság határozza meg, hogy egy elem hogyan jelenik meg a dokumentumban, és hogyan lép kölcsönhatásba más elemekkel, részt véve a layout flow-ban. Meghatározza az elem formázási blokk típusát.

Fő értékek:

block: Az elem blokk formátumban jelenik meg. Elfoglalja a rendelkezésre álló teljes szélességet, új sorban kezdődik, és meghatározott méretekkel (width, height) rendelkezhet.
inline: Az elem inline formátumban jelenik meg. Nem kezd új sort, csak a szükséges szélességet foglalja el, és nem rendelkezhet meghatározott méretekkel (width, height). A függőleges margók (margin-top, margin-bottom) és belső kitöltés (padding-top, padding-bottom) nem befolyásolják a környező elemeket.
inline-block: Az elem inline formátumban jelenik meg, de blokk módon viselkedik a soron belül. Nem kezd új sort, meghatározott méretekkel (width, height) és margókkal, belső kitöltésekkel rendelkezhet, amelyek befolyásolják a környező elemeket.
none: Az elem és tartalma nem jelenik meg. Az elem teljesen eltűnik a dokumentum folyamatából, nem foglal helyet.
flex: Az elem Flex konténerré válik, és közvetlen leszármazottai Flex elemekké válnak. Rugalmas elrendezések létrehozására használják.
grid: Az elem Grid konténerré válik. Hálóra alapuló elrendezések létrehozására használják.

Hogyan működik:

A böngésző a display értékét használja annak meghatározására, hogy az elem melyik formázási kontextusban található. Ez befolyásolja:

A dokumentum folyamát: Hogyan helyezkedik el az elem a szomszédaihoz képest.
Az elem méreteit: A szélesség és magasság beállításának lehetőségét, valamint a tartalom hatását a méretekre.
A környező elemekre gyakorolt hatást: Hogyan befolyásolják az elem margói és méretei más elemek elrendezését.

Példa:

/* `display: block` elem */
div {
  display: block;
  width: 100%; /* Teljes szélességet elfoglal */
  margin-bottom: 10px; /* Függőleges térköz létrehozása */
}

/* `display: inline` elem */
span {
  display: inline;
  /* width és height figyelmen kívül hagyva */
  /* margin-top és margin-bottom figyelmen kívül hagyva */
}

/* `display: inline-block` elem */
img {
  display: inline-block;
  width: 100px; /* Szélesség beállítható */
  height: 100px; /* Magasság beállítható */
  margin: 5px; /* Margók minden oldalra */
}

/* Rejtett elem */
.hidden {
  display: none;
}

Mi a display tulajdonság fő jelentése a CSS-ben, és hogyan működik?