Katrs tīmekļa lapas elements ir taisnstūrveida lodziņš. CSS displeja rekvizīts nosaka, kā šī taisnstūrveida lodziņa izturas. Parasti tiek izmantotas tikai dažas vērtības:
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 */ )
Visu elementu noklusējuma vērtība ir iekļauta. Lielākā daļa “User Agent stilu lapu” (noklusējuma stili, kurus pārlūks lieto visām vietnēm) atiestata daudzus elementus uz “bloķēt”. Apskatīsim katru no šiem un pēc tam aplūkosim dažas citas mazāk izplatītās vērtības.
Rindā
Elementu noklusējuma vērtība. Padomājiet par tādiem elementiem kā ,, vai un kā teksta iesaiņošana šajos elementos teksta virknē nesabojā teksta plūsmu.
Elementam ir 1px sarkana apmale. Ievērojiet, ka tas atrodas tieši vienā līnijā ar pārējo tekstu.
Iekļautais elements pieņems apmali un polsterējumu, taču elements joprojām atrodas vienā rindā, kā jūs varētu sagaidīt. Marža un polsterējums citus elementus virzīs tikai horizontāli, nevis vertikāli.
Iekļautais elements nepieņems heightun width. Tas to vienkārši ignorēs.
Iekļautais bloks
Elements, kas iestatīts uz, inline-blockir ļoti līdzīgs iekšējam, jo tas būs iestatīts vienā līnijā ar dabisko teksta plūsmu (uz “bāzes līnijas”). Atšķirība ir tā, ka jūs varat iestatīt a widthun heightkas tiks ievērots.
Bloķēt
blockPārlūkprogrammas UA stilu lapa ir iestatījusi vairākus elementus . Tie parasti ir konteineru elementi, piemēram , , un
. Arī teksts “bloķē” patīk
un
. Bloka līmeņa elementi nesēž vienā rindā, bet izlaužas tiem garām. Pēc noklusējuma (nenosakot platumu), tie aizņem tik daudz horizontālās vietas, cik vien iespējams.
Divi elementi ar sarkanām apmalēm ir
s, kas ir bloka līmeņa elementi. Starp tiem esošais elements nesēž vienā rindā, jo bloki sadalās zem iekšējiem elementiem.
Ieskriet
Pirmkārt, šis īpašums nedarbojas pārlūkprogrammā Firefox. Vārds ir tāds, ka tā specifikācija nav pietiekami precīzi definēta. Lai sāktu to saprast, tas ir tāpat kā tad, ja vēlaties, lai galvenes elements sēdētu vienā rindā ar tekstu zem tā. Peldēšana nedarbosies un arī nekas cits nedarbosies, jo jūs nevēlaties, lai galvene būtu teksta elementa bērns zem tā, bet gan to, ka tas ir pats par sevi neatkarīgs elements. “Atbalstošajās” pārlūkprogrammās tas ir šāds:
Neskatoties uz to.
Flexbox
displayĪpašums tiek izmantots arī jaunas fangled izkārtojumu metodes, piemēram, flexbox.
.header ( display: flex; )
Ir dažas vecākas flexbox sintakses versijas, tāpēc, lūdzu, skatiet šo rakstu par sintaksi, izmantojot flexbox ar vislabāko pārlūka atbalstu. Noteikti skatiet šo pilnīgo Flexbox rokasgrāmatu.
Plūsmas sakne
flow-rootDisplejs vērtība rada jaunu "bloku formatējumu konteksts", bet citādi, piemēram block. Jauna BFC palīdz ar tādām lietām kā pludiņu tīrīšana, novēršot nepieciešamību pēc hakeriem, lai to izdarītu.
.group ( display: flow-root; )
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
Chrome
Firefox
IE
Mala
Safari
58
53
Nē
79
13
Mobilais / planšetdators
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81.
13.0-13.1
Režģis
Režģa izkārtojumu sākotnēji iestatīs arī displeja īpašums.
body ( display: grid; )
Šeit ir mūsu ceļvedis par režģa izkārtojumu, kurā iekļauta pārlūkprogrammas atbalsta diagramma.
Nav
Pilnībā noņem elementu no lapas. Ņemiet vērā, ka, kamēr elements joprojām atrodas DOM, tas tiek noņemts vizuāli un jebkādā citā iespējamā veidā (jūs nevarat cilni tam vai tā bērniem, ekrāna lasītāji to ignorē utt.).
Tabulas vērtības
Ir viss displeja vērtību kopums, kas piespiež ne tabulas elementus uzvesties kā tabulas elementos, ja jums tas nepieciešams. Tas ir reti sastopams, taču dažreiz tas ļauj jums būt “semantiskākam” ar savu kodu, vienlaikus izmantojot tabulu unikālās pozicionēšanas iespējas.
