A weboldal minden eleme téglalap alakú mező. A CSS megjelenítési tulajdonságai meghatározzák, hogy az a téglalap alakú doboz hogyan viselkedjen. Csak néhány érték van, amelyet általában használnak:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
Az összes elem alapértelmezett értéke inline. A legtöbb „User Agent stíluslap” (az alapértelmezett stílus, amelyet a böngésző az összes webhelyre alkalmaz) sok elemet „blokkolni” állít vissza. Menjünk át ezek mindegyikén, majd térjünk ki a többi kevésbé gyakori értékre.
Sorban
Az elemek alapértelmezett értéke. Gondolj elemeket, mint , vagy hogyan sortörésekkel azokban elemeket a sztring nem törik az áramlás a szöveget.
Az elem 1 képpontos piros szegéllyel rendelkezik. Figyelje meg, hogy a szöveg többi részével jobb vonalban helyezkedik el.
Egy beillesztett elem elfogadja a margót és a kitöltést, de az elem továbbra is beilleszkedik, ahogyan az várható volt. A margó és a párnázás más elemeket csak vízszintesen tol el, függőlegesen nem.
Az inline elem nem fogadja el heightés width. Csak figyelmen kívül hagyja.
Inline blokk
A (z) elemre beállított elem inline-blocknagyon hasonlít a beillesztéshez, mivel a szöveg természetes áramlásával (az „alapvonalon”) beilleszkedik. A különbség az, hogy képes beállítani az a értéket width, heightamelyet tiszteletben fog tartani.
Blokk
Számos elemet állít be blocka böngésző UA stíluslapja. Ezek általában tartály elemek, mint a , , és
. Szöveg „blokkol” is
és
. A blokkszintű elemek nem ülnek befelé, hanem elszakadnak mellettük. Alapértelmezés szerint (szélesség beállítása nélkül) annyi vízszintes helyet foglalnak el, amennyit csak tudnak.
A két piros szegélyű elem az
amelyek blokkszintű elemek. A köztük lévő elem nem ül befelé, mert a blokkok lebontják az inline elemek alatt.
Befut
Először is, ez a tulajdonság nem működik a Firefoxban. A szó az, hogy a specifikációja nincs elég pontosan meghatározva. Ahhoz azonban, hogy megértsük, mintha egy fejléc elemet akarna ülni az alatta lévő szöveggel. A lebegés nem fog működni, és semmi más sem, mivel nem azt szeretné, hogy a fejléc az alatta lévő szövegelem gyermeke legyen, hanem azt, hogy a saját független eleme legyen. A „támogató” böngészőkben ez a következő:
Pedig ne számíts rá.
Flexbox
Az displayingatlant olyan új, elrendezett elrendezési módszerekhez is használják, mint a Flexbox.
.header ( display: flex; )
A flexbox szintaxisának vannak régebbi verziói, ezért a legjobb böngészőtámogatással rendelkező flexbox használatának szintaxisát olvassa el ebben a cikkben. Feltétlenül olvassa el a Flexbox teljes útmutatóját.
Flow-Root
A flow-rootmegjelenített érték új „blokkformázási kontextust” hoz létre, de másképp hasonló block. Egy új BFC olyan dolgokban segít, mint például az úszók törlése, így nincs szükség a feltörésekre.
.group ( display: flow-root; )
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
Króm
Firefox
AZAZ
Él
Szafari
58
53
Nem
79
13.
Mobil / Tablet
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81.
13.0-13.1
Rács
A rács elrendezését kezdetben a megjelenítési tulajdonság is beállítja.
body ( display: grid; )
Itt található útmutatónk a Rács elrendezéséről, amely tartalmaz egy böngésző támogatási táblázatot.
Egyik sem
Teljesen eltávolítja az elemet az oldalról. Vegye figyelembe, hogy amíg az elem még mindig a DOM-ban van, vizuálisan és bármilyen más elképzelhető módon eltávolításra kerül (nem lehet tabulálni sem vele, sem gyermekeivel, a képernyőolvasók figyelmen kívül hagyják stb.).
Táblázat értékei
Van egy teljes megjelenítési értékkészlet, amely arra kényszeríti a nem tábla elemeket, hogy úgy viselkedjenek, mint a tábla elemei, ha erre szükség van. Ez ritka, de néha lehetővé teszi, hogy "szemantikusabb" legyél a kódoddal, miközben kihasználod a táblák egyedi pozicionálási képességeit.
