Hvert element på en webside er en rektangulær rute. Visningsegenskapen i CSS bestemmer hvordan den rektangulære boksen oppfører seg. Det er bare en håndfull verdier som ofte brukes:
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 */ )
Standardverdien for alle elementene er innebygd. De fleste “User Agent Stylesheets” (standardstiler nettleseren bruker på alle nettsteder) tilbakestiller mange elementer til “block”. La oss gå gjennom hver av disse, og deretter dekke noen av de andre mindre vanlige verdiene.
På linje
Standardverdien for elementer. Tenk på elementer som , eller, og hvordan innpakning av tekst i disse elementene i en tekststreng ikke bryter flyten av teksten.
Det elementet har en 1px rød ramme. Legg merke til at den sitter rett på linje med resten av teksten.
Et innebygd element godtar margin og polstring, men elementet sitter fortsatt som du forventer. Margin og polstring vil bare skyve andre elementer horisontalt bort, ikke vertikalt.
Et integrert element godtar ikke heightog width. Det vil bare ignorere det.
Inline Block
Et element satt til inline-blocker veldig likt inline ved at det vil sette inline med den naturlige flyt av tekst (på "baseline"). Forskjellen er at du er i stand til å sette et widthog heightsom vil bli respektert.
Blokkere
En rekke elementer er satt til blockav UA-stilarket i nettleseren. De er vanligvis containerelementer, som , og
. Tekst "blokker" som
og
. Blokkeringsnivåelementer sitter ikke innebygd, men går forbi dem. Som standard (uten å angi en bredde) tar de så mye vannrett plass som de kan.
De to elementene med de røde kantene er
s som er blokknivåelementer. Det element i mellom dem ikke sitter inline fordi blokkene brytes ned under rulleelementer.
Innkjøring
For det første fungerer denne egenskapen ikke i Firefox. Ordet er at spesifikasjonen for det ikke er godt definert nok. For å begynne å forstå det skjønt, er det som om du vil at et headerelement skal sitte integrert med teksten under. Flytende vil ikke fungere, og heller ikke noe annet, siden du ikke vil at overskriften skal være et barn av tekstelementet under den, vil du at den skal være sitt eget uavhengige element. I "støttende" nettlesere er det slik:
Ikke stole på det, skjønt.
Flexbox
Den displayEiendommen brukes også for nye fangled layout metoder som flexbox.
.header ( display: flex; )
Det er noen eldre versjoner av flexbox-syntaksen, så se denne artikkelen for syntaksen i bruk av flexbox med den beste nettleserstøtten. Sørg for å se denne komplette guiden til Flexbox.
Flow-Root
Den flow-rootvisningsverdien skaper en ny “blokk formatering kontekst”, men er ellers like block. En ny BFC hjelper med ting som å rydde flyter, og fjerner behovet for hack for å gjøre det.
.group ( display: flow-root; )
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
Chrome
Firefox
DVS
Kant
Safari
58
53
Nei
79
1. 3
Mobil / nettbrett
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13.0-13.1
Nett
Rutenettoppsett blir også innledningsvis satt av visningsegenskapen.
body ( display: grid; )
Her er vår guide om rutenettoppsett, som inkluderer et nettleserstøttediagram.
Ingen
Fjerner elementet helt fra siden. Merk at mens elementet fremdeles er i DOM, fjernes det visuelt og på en annen tenkelig måte (du kan ikke tappe til det eller dets barn, det ignoreres av skjermlesere osv.).
Tabellverdier
Det er et helt sett med skjermverdier som tvinger elementer som ikke er i tabellen, til å oppføre seg som tabellelementer, hvis du trenger det. Det er sjelden, men det lar deg noen ganger være "mer semantisk" med koden din mens du bruker tabellens unike posisjoneringskrefter.
