CSS -weergave- eigenschap
Voorbeeld
Gebruik van enkele verschillende weergavewaarden:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De displayeigenschap specificeert het weergavegedrag (het type weergavekader) van een element.
In HTML wordt de standaardweergave-eigenschapswaarde overgenomen uit de HTML-specificaties of uit het standaardopmaakmodel van de browser/gebruiker. De standaardwaarde in XML is inline, inclusief SVG-elementen.
| Standaardwaarde: | ? |
|---|---|
| geërfd: | Nee |
| Animeerbaar: | Nee. Lees over animeren |
| Versie: | CSS1 |
| JavaScript-syntaxis: | object .style.display="geen" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
| Property | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 |
Opmerking: voor de waarden "flex" en "inline-flex" is het voorvoegsel -webkit- vereist om in Safari te werken.
Opmerking: "display: content" werkt niet in eerdere Edge-versie 79.
CSS-syntaxis
display: value;
Eigendomswaarden
| Value | Description | Play it |
|---|---|---|
| inline | Displays an element as an inline element (like <span>). Any height and width properties will have no effect | |
| block | Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width | |
| contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM | |
| flex | Displays an element as a block-level flex container | |
| grid | Displays an element as a block-level grid container | |
| inline-block | Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values | |
| inline-flex | Displays an element as an inline-level flex container | |
| inline-grid | Displays an element as an inline-level grid container | |
| inline-table | The element is displayed as an inline-level table | |
| list-item | Let the element behave like a <li> element | |
| run-in | Displays an element as either block or inline, depending on context | |
| table | Let the element behave like a <table> element | |
| table-caption | Let the element behave like a <caption> element | |
| table-column-group | Let the element behave like a <colgroup> element | |
| table-header-group | Let the element behave like a <thead> element | |
| table-footer-group | Let the element behave like a <tfoot> element | |
| table-row-group | Let the element behave like a <tbody> element | |
| table-cell | Let the element behave like a <td> element | |
| table-column | Let the element behave like a <col> element | |
| table-row | Let the element behave like a <tr> element | |
| none | The element is completely removed | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelden
Voorbeeld
Een demonstratie van het gebruik van de eigenschapswaarde content. In het volgende voorbeeld zal de .a container verdwijnen, en de onderliggende elementen (.b) kinderen van het element het volgende niveau hoger in de DOM maken:
.a {
display: contents;
border:
2px solid red;
background-color: #ccc;
padding: 10px;
width: 200px;
}
.b {
border: 2px solid blue;
background-color: lightblue;
padding: 10px;
}
Voorbeeld
Een demonstratie van het gebruik van de overerven-eigenschapswaarde:
body {
display: inline;
}
p {
display: inherit;
}
Voorbeeld
Stel de richting van sommige flexibele items in een <div>-element in omgekeerde volgorde in:
div {
display: flex;
flex-direction: row-reverse;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-weergave en zichtbaarheid
HTML DOM-referentie: eigenschap weergeven