Hvert element på en webside er en rektangulær boks. Displayegenskaben i CSS bestemmer, hvordan den rektangulære boks opfører sig. Der er kun en håndfuld værdier, der ofte bruges:
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 */ )
Standardværdien for alle elementer er integreret. De fleste "User Agent-typografiark" (standardformaterne, browseren anvender på alle websteder), nulstiller mange elementer til "blokering". Lad os gennemgå hver af disse og derefter dække nogle af de andre mindre almindelige værdier.
Inline
Standardværdien for elementer. Tænk på elementer som , eller, og hvordan indpakning af tekst i disse elementer inden for en tekststreng ikke bryder tekstens strømning.
Det element har en 1px rød kant. Bemærk, at det sidder lige indbygget med resten af teksten.
Et inline-element accepterer margen og polstring, men elementet sidder stadig inline, som du kunne forvente. Margen og polstring vil kun skubbe andre elementer vandret væk, ikke lodret.
Et integreret element accepterer ikke heightog width. Det vil bare ignorere det.
Indbygget blok
Et element, der er indstillet til, inline-blockligner meget indbygget, idet det indstilles med den naturlige tekststrøm (på "basislinjen"). Forskellen er, at du er i stand til at indstille en, widthog heightsom vil blive respekteret.
Blok
Et antal elementer er indstillet til blockaf browserens UA-stilark. De er som regel beholderelementer, ligesom , og
. Skriv også "blokke" som
og
. Elementer på blokniveau sidder ikke inline, men bryder forbi dem. Som standard (uden at indstille en bredde) optager de så meget vandret plads som muligt.
De to elementer med de røde kanter er
s, som er blokniveauer. Det element i mellem dem ikke sidde inline fordi blokkene nedbryde under inline elementer.
Løb ind
For det første fungerer denne egenskab ikke i Firefox. Ordet er, at specifikationen for det ikke er veldefineret nok. For at begynde at forstå det er det imidlertid som om du vil have et headerelement til at sidde integreret med teksten under det. Flydende fungerer ikke, og heller ikke noget andet, da du ikke ønsker, at overskriften skal være et barn af tekstelementet under det, skal du have det til at være dets eget uafhængige element. I "understøttende" browsere er det sådan:
Stol ikke på det.
Flexbox
Den displayegenskab bruges også til nye nymodens layout metoder som flexbox.
.header ( display: flex; )
Der er nogle ældre versioner af flexbox-syntaksen, så se denne artikel for syntaksen ved brug af flexbox med den bedste browsersupport. Sørg for at se denne komplette guide til Flexbox.
Flow-Root
Den flow-rootviste værdi skaber en ny ”blok formatering kontekst”, men er ellers ligesom block. En ny BFC hjælper med ting som at rydde flyde, hvilket fjerner behovet for hacks til at gøre det.
.group ( display: flow-root; )
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
Chrome
Firefox
IE
Edge
Safari
58
53
Ingen
79
13
Mobil / tablet
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13.0-13.1
Gitter
Gitterlayout indstilles også oprindeligt af displayejendommen.
body ( display: grid; )
Her er vores guide til netlayout, som inkluderer et browserdiagram.
Ingen
Fjerner helt elementet fra siden. Bemærk, at mens elementet stadig er i DOM, fjernes det visuelt og enhver anden tænkelig måde (du kan ikke tabe til det eller dets børn, det ignoreres af skærmlæsere osv.).
Tabelværdier
Der er et helt sæt skærmværdier, der tvinger elementer, der ikke er fra en tabel, til at opføre sig som tabelelementer, hvis du har brug for, at det sker. Det er sjældent, men det giver dig nogle gange mulighed for at være "mere semantisk" med din kode, mens du bruger de unikke positionskræfter i tabeller.
