Over CSS display
Vanaf de tijd dat internet werd uitgevonden en het WorldWide Web werd bedacht, worden websites gebouwd met HTML. Voor het
weergeven van de content was dat voldoende. Al gauw bleek dat er met alléén HTML er te weinig controle is over
de opmaak van de webpagina's, zowel naar verschijningsvorm van de diverse elementen, als de indeling van de pagina zelf.
Om dat probleem op te lossen is CSS gemaakt.
HTML en CSS werken nauw met elkaar samen en kunnen beide worden gewijzigd met JavaScript. De opmaak van een webpagina kan
nu tot op de pixel nauwkeurig worden bepaald, evenals het gedrag van de opmaak als het browservenster wordt vergroot of verkleind.
De CSS-eigenschap die het meest geschikt is voor het beheersen en manipuleren van de pagina-opmaak heet display. display kan op veel manieren worden ingesteld, zie onderstaand overzicht. Elke van deze eigenschappen heeft zijn eigen invloed. Als je bijvoorbeeld een regel tekst de eigenschap display:list-item geeft, wordt die regel getoond met een bullet aan het begin van de regel.
Hieronder een overzicht van de waarden die je aan display: kunt geven. Lees ook de tekst onderaan de bladzijde.
| display: … | Beschrijving | |
| none |
Het element wordt helemaal niet getoond. |
|
| block | Het element wordt getoond zoals een block-element
(bijv. <p>). |
|
| inline | Het element wordt getoond zoals een inline-element
(bijv. <span>). Dit is de defaultwaarde. |
|
| run-in | Het hangt van de context af hoe het element wordt
getoond: als block of inline. |
|
| inline-block | Toont een element als een container. De inhoud
wordt geformatteerd als block. Het element zelf wordt getoond als inline. |
|
| list-item | Het element gedraagt zich als <li>-element. |
|
| table | Het element gedraagt zich als <table>. |
|
| inline-table | De tabel wordt getoond als an inline-element. |
|
| table-caption | Het element gedraagt zich als tabel-onderschrift
(<caption>). |
|
| table-row | Het element gedraagt zich als tabel-rij (<tr>). |
|
| table-column | Het element gedraagt zich als tabel-kolom (<col>). |
|
| table-cell | Het element gedraagt zich als tabel-cel (<td>). |
|
| table-row-group | Het element gedraagt zich als een groep
rijen in een tabel (<tbody>). |
|
| table-column-group | Het element gedraagt zich als een groep
kolommen in een tabel (<colgroup>). |
|
| table-header-group | Het element gedraagt zich als tabel-kop
(<thead>). |
|
| table-footer-group | Het element gedraagt zich als voettekst
in een tabel (<tfoot>). |
|
| flex | Het element wordt getoond als flexibele block-container
(Flexbox). |
|
| inline-flex | Het element wordt getoond als flexibele block-container
(Flexbox). |
De waarden display:none, display:block, display:inline, display:inline-block en display:run-in
hebben directe invloed op de opmaak van de pagina. Als dat niet mag gebruik je visibility:hidden of visibility:visible.
Zie het item Informatie laten verdwijnen en weer laten verschijnen.
De mogelijkheden van display:flex en display:inline-flex zijn zo uitgebreid dat ze een eigen naam hebben gekregen: Flexbox. Zie daarvoor het item Over CSS display:flex (Flexbox).
