CSS -lay-out - De weergave- eigenschap
De displayeigenschap is de belangrijkste CSS-eigenschap voor het besturen van de lay-out.
De weergave Eigenschap
De displayeigenschap geeft aan of/hoe een element wordt weergegeven.
Elk HTML-element heeft een standaardweergavewaarde, afhankelijk van het type element. De standaard weergavewaarde voor de meeste elementen is blockof
inline.
Klik om het paneel weer te geven
This panel contains a <div> element, which is hidden by default (display: none).
It is styled with CSS, and we use JavaScript to show it (change it to (display: block).
Elementen op blokniveau
Een element op blokniveau begint altijd op een nieuwe regel en neemt de volledige beschikbare breedte in beslag (strekt zich naar links en rechts zo ver mogelijk uit).
Voorbeelden van elementen op blokniveau:
- <div>
- <h1> - <h6>
- <p>
- <formulier>
- <kop>
- <voettekst>
- <sectie>
Inline-elementen
Een inline element begint niet op een nieuwe regel en neemt slechts zoveel breedte in beslag als nodig is.
Dit is een inline <span>-element in een alinea.
Voorbeelden van inline-elementen:
- <span>
- <a>
- <img>
Geen weergeven;
display: none;wordt vaak gebruikt met JavaScript om elementen te verbergen en weer te geven zonder ze te verwijderen en opnieuw te maken. Bekijk ons laatste voorbeeld op deze pagina als je wilt weten hoe dit kan.
Het <script>element gebruikt display: none;
als standaard.
Overschrijf de standaard weergavewaarde
Zoals gezegd heeft elk element een standaard weergavewaarde. U kunt dit echter overschrijven.
Het wijzigen van een inline-element in een blokelement, of omgekeerd, kan handig zijn om de pagina er op een specifieke manier uit te laten zien en toch de webstandaarden te volgen.
Een bekend voorbeeld is het maken van inline- <li>elementen voor horizontale menu's:
Voorbeeld
li {
display: inline;
}
Opmerking: het instellen van de weergave-eigenschap van een element verandert alleen hoe het element wordt weergegeven , NIET wat voor soort element het is. Een inline-element met display: block;mag dus geen andere blokelementen bevatten.
In het volgende voorbeeld worden <span>-elementen weergegeven als blokelementen:
Voorbeeld
span {
display: block;
}
In het volgende voorbeeld worden <a>-elementen weergegeven als blokelementen:
Voorbeeld
a {
display: block;
}
Een element verbergen - weergave:geen of zichtbaarheid:verborgen?
display:none
visibility:hidden
Resetten
Het verbergen van een element kan worden gedaan door de displayeigenschap in te stellen op
none. Het element wordt verborgen en de pagina wordt weergegeven alsof het element er niet is:
Voorbeeld
h1.hidden {
display: none;
}
visibility:hidden; verbergt ook een element.
Het element zal echter nog steeds dezelfde ruimte innemen als voorheen. Het element wordt verborgen, maar heeft nog steeds invloed op de lay-out:
Voorbeeld
h1.hidden {
visibility: hidden;
}
Meer voorbeelden
This example demonstrates display: none; versus visibility: hidden;
This example demonstrates how to use CSS and JavaScript to show an element on
click.
CSS Display/Visibility Properties
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |