Kiekvienas tinklalapio elementas yra stačiakampis langelis. CSS rodymo ypatybė nustato, kaip elgiasi tas stačiakampis langelis. Yra tik keletas vertybių, kurios paprastai naudojamos:
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 */ )
Numatytoji visų elementų vertė yra tiesioginė. Dauguma „Vartotojo agento stiliaus lentelių“ (numatytieji stiliai, kuriuos naršyklė taiko visoms svetainėms) daugelį elementų atstato į „blokuoti“. Peržvelkime kiekvieną iš šių aspektų ir apžvelkime kai kurias kitas mažiau paplitusias vertybes.
Inline
Numatytoji elementų vertė. Pagalvokite apie tokius elementus kaip , arba, ir kaip teksto įvyniojimas į tuos elementus teksto eilutėje nenutraukia teksto srauto.
Elementas turi 1px raudoną sieną. Atkreipkite dėmesį, kad jis yra tiesiai įbrėžtas su likusiu tekstu.
Įterptasis elementas priims paraštę ir užpildą, tačiau elementas vis tiek sėdi tiesiai, kaip galite tikėtis. Marža ir kamšalas kitus elementus nustums tik horizontaliai, o ne vertikaliai.
Įterptasis elementas nepriims heightir width. Tai tiesiog nepaisys.
„Inline Block“
Nustatytas elementas inline-blockyra labai panašus į įterptąjį, nes jis bus įtrauktas į natūralų teksto srautą („bazinėje linijoje“). Skirtumas yra tas, kad jūs galite nustatyti a widthir heightkuris bus laikomasi.
Blokuoti
blockNaršyklės UA stilių lape nustatoma keletas elementų . Jie paprastai yra konteinerių elementai, pavyzdžiui , ir
. Taip pat rašykite tekstą „blokai“, pvz
ir
. Bloko lygio elementai nesėdi išilgai, bet prasilenkia pro juos. Pagal numatytuosius nustatymus (nenustačius pločio) jie užima tiek horizontalios vietos, kiek gali.
Du elementai su raudonomis sienomis yra
s, kurie yra bloko lygio elementai. Tarp jų esantis elementas nesėdi tiesiai, nes blokai suskaidomi žemiau įterptųjų elementų.
Įvažiavimas
Pirma, ši nuosavybė neveikia „Firefox“. Žodis, kad jo specifikacijos nėra pakankamai tiksliai apibrėžtos. Kad tai pradėtum suprasti, lyg ir norėtum, kad antraštės elementas sėdėtų tiesiai po tekstu. Plūduriuojant jis neveiks ir nieko kito neveiks, nes nenorite, kad antraštė būtų po juo esančio teksto elemento vaikas, norite, kad tai būtų jos savarankiškas elementas. „Palaikančiose“ naršyklėse tai yra taip:
Vis dėlto nesitikėkite.
„Flexbox“
displayNuosavybė taip pat naudojamas naujų fangled išdėstymo metodus, pavyzdžiui, Lanksčiojo lauko.
.header ( display: flex; )
Yra keletas senesnių „flexbox“ sintaksės versijų, todėl prašome perskaityti šį straipsnį apie „flexbox“ su geriausia naršyklės palaikymu sintaksę. Būtinai peržiūrėkite šį išsamų „Flexbox“ vadovą.
Srauto šaknis
flow-rootEkranas vertės sukuria naują "blokas formatavimo kontekste", tačiau yra kitaip kaip block. Naujas BFC padeda išvalyti plūdes, todėl nereikia įsilaužimų.
.group ( display: flow-root; )
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
„Chrome“
„Firefox“
T.Y
Briauna
„Safari“
58
53
Ne
79
13
Mobilusis / planšetinis kompiuteris
„Android Chrome“
„Android Firefox“
„Android“
„iOS Safari“
88
85
81
13.0-13.1
Tinklelis
Tinklo išdėstymą taip pat iš pradžių nustatys ekrano ypatybė.
body ( display: grid; )
Čia pateikiamas mūsų tinklelio išdėstymo vadovas, kuriame pateikiama naršyklės palaikymo diagrama.
Nė vienas
Visiškai pašalinamas elementas iš puslapio. Atminkite, kad kol elementas vis dar yra DOM, jis pašalinamas vizualiai ir bet kokiu kitu įmanomu būdu (negalite pažymėti jo ar jo vaikų, ekrano skaitytuvai jo nepaiso ir pan.).
Lentelės vertės
Yra visas rodymo verčių rinkinys, kuris priverčia ne lentelės elementus elgtis kaip lentelės elementus, jei jums to reikia. Tai retas atvejis, tačiau kartais jis leidžia būti „prasmingesniu“ su savo kodu, tuo pačiu naudojant unikalias lentelių padėties nustatymo galimybes.
