Svaki je element na web stranici pravokutni okvir. Svojstvo prikaza u CSS-u određuje kako će se ponašati taj pravokutni okvir. Postoji samo nekoliko vrijednosti koje se obično koriste:
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 */ )
Zadana vrijednost za sve elemente je ugrađena. Većina "Tablica stilova korisničkog agenta" (zadani stilovi koje preglednik primjenjuje na sve web stranice) resetiraju mnoge elemente na "blokiranje". Prođimo kroz svaku od ovih, a zatim pokrijmo neke druge rjeđe vrijednosti.
U redu
Zadana vrijednost za elemente. Zamislite elemente poput , ili i kako umotavanje teksta u te elemente unutar niza teksta ne narušava tok teksta.
Element ima 1px crveni obrub. Primijetite da se nalazi u ravnini s ostatkom teksta.
Ugrađeni element prihvaća marginu i dodavanje, ali element i dalje stoji u redu kako biste mogli očekivati. Margina i dodavanje samo će odgurnuti ostale elemente vodoravno, a ne okomito.
Ugrađeni element neće prihvatiti heighti width. Samo će ga ignorirati.
Ugrađeni blok
Element postavljen na inline-blockvrlo je sličan umetnutom po tome što će se postaviti u skladu s prirodnim protokom teksta (na "osnovnoj liniji"). Razlika je u tome što ste u mogućnosti postaviti a widthi heightkoji će se poštovati.
Blok
Brojni elementi postavljaju se blocku pregledniku stilova UA. Oni su obično kontejner elementi, kao što su , i
. Također tekst "blokirajte" poput
i
. Elementi na razini bloka ne stoje u redu već se probijaju pored njih. Prema zadanim postavkama (bez postavljanja širine) zauzimaju što više vodoravnog prostora.
Dva elementa s crvenim obrubima su
s koji su elementi na razini bloka. Element između njih ne sjedi u istoj razini, jer su blokovi razbiti ispod inline elemenata.
Nalet
Prvo, ovo svojstvo ne radi u Firefoxu. Riječ je da specifikacije za to nisu dovoljno dobro definirane. Da biste ga počeli razumjeti, to je kao da želite da element zaglavlja stoji u redu s tekstom ispod. Plutajući neće raditi, kao ni bilo što drugo, jer ne želite da zaglavlje bude podređeno elementu teksta ispod njega, već želite da bude njegov vlastiti neovisni element. U "podržavajućim" preglednicima to je ovako:
Ipak, ne računajte na to.
Flexbox
displaySvojstvo koristi se i za nove pomodarski metode izgleda kao flexbox.
.header ( display: flex; )
Postoje neke starije verzije sintakse flexbox, pa pogledajte ovaj članak za sintaksu korištenja flexboxa s najboljom podrškom za preglednik. Obavezno pogledajte ovaj cjeloviti vodič za Flexbox.
Tijek-korijen
Prikazana flow-rootvrijednost stvara novi "kontekst formatiranja bloka", ali je inače sličan block. Novi BFC pomaže u stvarima poput čišćenja plovaka, uklanjajući potrebu za hakovima.
.group ( display: flow-root; )
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
Krom
Firefox
IE
Rub
Safari
58
53
Ne
79
13
Mobitel / tablet
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13,0-13,1
Mreža
Raspored mreže također će u početku postaviti svojstvo prikaza.
body ( display: grid; )
Evo našeg vodiča o rasporedu mreže, koji uključuje tablicu podrške za preglednik.
Nijedna
U potpunosti uklanja element sa stranice. Imajte na umu da dok je element još uvijek u DOM-u, uklanja se vizualno i na bilo koji drugi mogući način (ne možete dodati karticu na njega ili njegovu djecu, čitatelji zaslona ga ignoriraju, itd.).
Vrijednosti tablice
Postoji čitav skup vrijednosti prikaza koji prisiljavaju elemente koji nisu iz tablice da se ponašaju poput elemenata tablice, ako to trebate dogoditi. Rijetko je, ali ponekad vam omogućuje da budete „semantičniji“ sa svojim kodom, a pritom koristite jedinstvene mogućnosti pozicioniranja tablica.
