CSS Layout - display Eigenschap

Display is een van de belangrijkste CSS-eigenschappen voor het controleren van de lay-out.

display-eigenschap

Display bepaalt of en hoe een element wordt weergegeven.

Elke HTML-element heeft een standaard display-waarde, afhankelijk van zijn elementtype. De standaard display-waarde van de meeste elementen is block of inline.

Klik om het paneel weer te geven

Dit paneel bevat een <div>-element, dat standaard verborgen is. (display: none)

het wordt gestyled door CSS, en we gebruiken JavaScript om het weer te geven. (Wijzig naar display: block)

Blokelementen (block element)

Blokelementen beginnen altijd op een nieuwe regel en nemen de beschikbare volledige breedte in beslag (zoveel mogelijk naar links en rechts uitstrekken).

Deze <div> element behoort tot de blokelementen.

Enkele voorbeelden van blokelementen:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

inline-elementen (inline element)

inline-elementen beginnen niet op een nieuwe regel en nemen alleen de benodigde breedte in beslag.

Dit is een paragraafinline <span> element.

Enkele voorbeelden van inline-elementen:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; gebruikt in combinatie met JavaScript om elementen te verbergen en weer te geven zonder deze te verwijderen en opnieuw aan te maken. Als je wilt weten hoe je dit kunt bereiken, bekijk dan het laatste voorbeeld op deze pagina.

Standaard is<script> elementen gebruiken display: none;.

Overschrijf de standaard Display-waarde

Zoals eerder vermeld, heeft elk element een standaard display-waarde. Maar je kunt deze overschrijven.

het wijzigen van inline-elementen naar blokelementen en omgekeerd, is nuttig om de pagina op een specifieke manier te tonen terwijl de webstandaarden worden gevolgd.

Een veelvoorkomend voorbeeld is het genereren van inline <li> elementen:

voorbeeld

li {
  display: inline;
}

Probeer het zelf

Opmerking:het instellen van de display-eigenschap van een element wijzigt alleende weergave van elementenen verandert de soort van het element niet. Daarom, de weergave van display: block; inline-elementen mogen geen andere blokelementen bevatten.

Het volgende voorbeeld toont de <span> elementen als blokelementen:

voorbeeld

span {
  display: block;
}

Probeer het zelf

Het volgende voorbeeld toont de <a> elementen als blokelementen:

voorbeeld

a {
  display: block;
}

Probeer het zelf

Verbergen elementen - display: none of visibility: hidden?

display: none

visibility: hidden

Herstel

door Display de eigenschap is ingesteld op none Elementen kunnen ook worden verborgen. Het element wordt verborgen en de pagina lijkt erop dat het element er niet is:

voorbeeld

h1.hidden {
  display: none;
}

Probeer het zelf

visibility: hidden; Het is ook mogelijk om elementen te verbergen.

Maar, het element neemt nog steeds dezelfde ruimte in als eerder. Het element wordt verborgen, maar beïnvloedt nog steeds de lay-out:

voorbeeld

h1.hidden {
  visibility: hidden;
}

Probeer het zelf

Meer Voorbeelden

Het verschil tussen display: none; en visibility: hidden;
Dit voorbeeld demonstreert display: none; VS visibility: hidden;
Gebruik van CSS en JavaScript combineren om inhoud weer te geven
Dit voorbeeld demonstreert hoe je elementen weergeeft met CSS en JavaScript bij klikken.

CSS Display/Visibility Eigenschappen

Eigenschap Beschrijving
Display Specificeer hoe een element weergegeven moet worden.
Visibility Specificeer of een element zichtbaar moet zijn.