Elk element op een webpagina is een rechthoekige doos. De display-eigenschap in CSS bepaalt hoe dat rechthoekige vak zich gedraagt. Er zijn slechts een handvol waarden die vaak worden gebruikt:
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 */ )
De standaardwaarde voor alle elementen is inline. De meeste "User Agent-stylesheets" (de standaardstijlen die de browser op alle sites toepast) zetten veel elementen terug op "blokkeren". Laten we ze allemaal doornemen en dan enkele van de andere, minder gebruikelijke waarden bespreken.
In lijn
De standaardwaarde voor elementen. Denk aan elementen zoals , of en hoe tekstomloop in die elementen binnen een reeks van tekst niet de stroom van de tekst te breken.
Het element heeft een 1px rode rand. Merk op dat het precies in lijn ligt met de rest van de tekst.
Een inline-element accepteert marge en opvulling, maar het element zit nog steeds inline zoals je zou verwachten. Marge en opvulling zullen andere elementen alleen horizontaal wegdrukken, niet verticaal.
Een inline-element accepteert heighten niet width. Het zal het gewoon negeren.
Inline blok
Een element dat inline-blockis ingesteld op lijkt erg op inline omdat het in lijn wordt geplaatst met de natuurlijke tekststroom (op de "basislijn"). Het verschil is dat je in staat bent om een in te stellen widthen heightdie wordt gerespecteerd.
Blok
Een aantal elementen wordt ingesteld blockdoor de UA-stylesheet van de browser. Ze zijn meestal houderelementen, zoals , en
Ook tekst "blokken" zoals
en
Elementen op blokniveau zitten niet inline maar breken er voorbij. Standaard (zonder een breedte in te stellen) nemen ze zoveel mogelijk horizontale ruimte in beslag.
De twee elementen met de rode randen zijn
s die blokniveau-elementen zijn. Het element ertussen zit niet inline omdat de blokken onder inline-elementen worden afgebroken.
Inlopen
Ten eerste werkt deze eigenschap niet in Firefox. Woord is dat de specificatie ervoor niet goed genoeg gedefinieerd is. Om het echter te beginnen te begrijpen, is het alsof u wilt dat een koptekstelement inline staat met de tekst eronder. Het zweven zal niet werken en ook niets anders, aangezien u niet wilt dat de koptekst een kind is van het tekstelement eronder, u wilt dat het een eigen onafhankelijk element is. In "ondersteunende" browsers is dit als volgt:
Reken er echter niet op.
Flexbox
De displayeigenschap wordt ook gebruikt voor nieuwe, verwarde lay-outmethoden zoals Flexbox.
.header ( display: flex; )
Er zijn enkele oudere versies van de flexbox-syntaxis, dus raadpleeg dit artikel voor de syntaxis bij het gebruik van flexbox met de beste browserondersteuning. Zorg ervoor dat u deze complete gids voor Flexbox leest.
Flow-Root
De flow-rootweergegeven waarde creëert een nieuwe "blokopmaakcontext", maar is verder zoals block. Een nieuwe BFC helpt met zaken als het opruimen van praalwagens, waardoor er geen hacks meer nodig zijn om dat te doen.
.group ( display: flow-root; )
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
Chrome
Firefox
D.W.Z
Rand
Safari
58
53
Nee
79
13
Mobiel / tablet
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13.0-13.1
Raster
De rasterlay-out wordt aanvankelijk ook bepaald door de eigenschap display.
body ( display: grid; )
Hier is onze gids over rasterlay-out, die een browserondersteuningsgrafiek bevat.
Geen
Verwijdert het element volledig van de pagina. Merk op dat terwijl het element zich nog in de DOM bevindt, het visueel en op elke andere denkbare manier wordt verwijderd (u kunt er niet naar of de onderliggende items gaan, het wordt genegeerd door schermlezers, enz.).
Tabelwaarden
Er is een hele reeks weergavewaarden die niet-tabelelementen dwingen zich te gedragen als tabelelementen, als dat nodig is. Het is zeldzaam, maar het stelt je soms in staat om "semantischer" te zijn met je code terwijl je de unieke positioneringskrachten van tabellen gebruikt.
