Vsak element na spletni strani je pravokotno polje. Lastnost zaslona v CSS določa, kako se bo pravokotno polje obnašalo. Obstaja le nekaj vrednosti, ki se pogosto uporabljajo:
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 */ )
Privzeta vrednost za vse elemente je vrstica. Večina "User Agent Styles Sheets" (privzeti slogi, ki jih brskalnik uporablja za vsa spletna mesta) ponastavi številne elemente na "block". Pojdimo skozi vsako od teh in nato pokrijmo še nekatere manj pogoste vrednote.
V vrsti
Privzeta vrednost za elemente. Pomislite na elemente, kot so , ali in kako zavijanje besedila v te elemente v nizu besedila ne prekine toka besedila.
Element ima rdečo obrobo 1px. Upoštevajte, da se nahaja v vrstici s preostalim delom besedila.
Vstavljeni element sprejme rob in oblazinjenje, vendar element še vedno stoji v vrstici, kot bi lahko pričakovali. Rob in oblazinjenje bodo druge elemente potisnili le vodoravno, ne navpično.
Vstavljeni element ne bo sprejel heightin width. Samo ignoriral ga bo.
Vrstni blok
Element, ki inline-blockje nastavljen na, je zelo podoben vrstici inline, saj bo nastavljen v vrstici z naravnim tokom besedila (na "osnovni črti"). Razlika je v tem, da lahko nastavite a widthin heightki bo spoštovan.
Blokiraj
Številni elementi so nastavljeni v blocktabeli slogi brskalnika. Običajno so elementi vsebnika, kot so , in
. Tudi besedilo "blokira" všeč
in
. Elementi ravni bloka ne sedijo v vrstici, ampak se prebijejo mimo njih. Privzeto (brez nastavitve širine) zavzamejo čim več vodoravnega prostora.
Dva elementa z rdečimi obrobami sta
s, ki so elementi na ravni bloka. Element med jim ne inline sedel, ker so bloki prekinil spodaj inline elementov.
Utekanje
Prvič, ta lastnost ne deluje v Firefoxu. Beseda govori, da specifikacija zanj ni dovolj natančno določena. Če ga želite začeti razumeti, je kot, če želite, da element glave sedi v vrstici z besedilom pod njim. Če plavate, ne bo delovalo in tudi nič drugega, saj ne želite, da je glava podrejena elementu besedila pod njim, ampak želite, da je to lasten neodvisen element. V "podpornih" brskalnikih je tako:
Vendar ne računajte na to.
Flexbox
displayLastnost se uporablja tudi za nove modno metode postavitve, kot je prilagodljivo polje.
.header ( display: flex; )
Obstaja nekaj starejših različic sintakse flexbox, zato si oglejte sintakso v tem članku pri uporabi flexboxa z najboljšo podporo brskalnika. Oglejte si ta popoln vodnik po Flexboxu.
Flow-Root
Prikazana flow-rootvrednost ustvari nov "kontekst formatiranja blokov", sicer pa je podoben block. Nov BFC pomaga pri stvareh, kot je čiščenje plovcev, in odpravlja potrebo po haktih.
.group ( display: flow-root; )
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
Chrome
Firefox
IE
Rob
Safari
58
53
Ne
79
13.
Mobilni / tablični računalnik
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13,0-13,1
Mreža
Postavitev mreže bo na začetku nastavila tudi lastnost zaslona.
body ( display: grid; )
Tu je naš vodnik o postavitvi mreže, ki vključuje tabelo za podporo brskalnika.
Nobenega
Element v celoti odstrani s strani. Upoštevajte, da je element, čeprav je še vedno v DOM-u, odstranjen vizualno in na kakršen koli drug način (nanj ali njegove podrejene elemente ne morete zavihkati, bralniki zaslona ga prezrejo itd.)
Vrednosti tabele
Obstaja celoten nabor prikaznih vrednosti, ki prisilijo elemente, ki niso tabele, da se obnašajo kot elementi tabele, če to potrebujete. To je redko, včasih pa vam omogoča, da ste s svojo kodo bolj semantični, hkrati pa uporabljate edinstvene položajne tabele.
