CSS
Layout controle
Zoeken…
Syntaxis
- weergave: geen | inline | blokkeren | lijst-item | inline-list-item | inline-blok | inline-tabel | tafel | tafelcel | tabel-kolom | tabel-kolom-groep | tafel-voettekst-groep | tabel-kopgroep- tafelrij | tafel-rij-groep | flex | inline-flex | rooster | inline-raster | inloop | robijn | robijnrode basis | ruby-text | ruby-base-container | ruby-text-container | inhoud;
parameters
| Waarde | Effect |
|---|---|
none | Verberg het element en voorkom dat het ruimte inneemt. |
block | Blokelement, bezet 100% van de beschikbare breedte, breek na element. |
inline | Inline-element, geen breedte, geen pauze na element. |
inline-block | Het nemen van speciale eigenschappen van zowel inline- als blokelementen, geen pauze, maar kan breedte hebben. |
inline-flex | Toont een element als een inline-level flexcontainer. |
inline-table | Het element wordt weergegeven als een inline-niveau tabel. |
grid | Gedraagt zich als een blokelement en bepaalt de inhoud volgens het rastermodel. |
flex | Gedraagt zich als een blokelement en geeft de inhoud weer volgens het flexbox-model. |
inherit | Neem de waarde over van het bovenliggende element. |
initial | Stel de waarde opnieuw in op de standaardwaarde die is afgeleid van gedrag dat wordt beschreven in de HTML-specificaties of van het standaardstijlblad van de browser / gebruiker. |
table | Gedraagt zich als de HTML- table element. |
table-cell | Laat het element zich gedragen als een <td> -element |
table-column | Laat het element zich gedragen als een <col> -element |
table-row | Laat het element zich gedragen als een <tr> -element |
list-item | Laat het element zich gedragen als een <li> -element. |
De eigenschap display
De display CSS-eigenschap is van fundamenteel belang voor het beheren van de lay-out en stroom van een HTML-document. De meeste elementen een standaard display waarde van ofwel block of inline (hoewel sommige elementen hebben andere standaardwaarden).
In lijn
Een inline element heeft slechts de breedte die nodig is. Het wordt horizontaal gestapeld met andere elementen van hetzelfde type en mag geen andere niet-inline elementen bevatten.
<span>This is some <b>bolded</b> text!</span>
Zoals hierboven aangetoond, zijn twee inline elementen, <span> en <b> , in-line (vandaar de naam) en doorbreken ze de tekststroom niet.
Blok
Een block bezet de maximaal beschikbare breedte van het bovenliggende element. Het begint met een nieuwe regel en, in tegenstelling tot inline elementen, beperkt het niet het type elementen dat het kan bevatten.
<div>Hello world!</div><div>This is an example!</div>
Het div element is standaard op blokniveau en zoals hierboven weergegeven, zijn de twee block verticaal gestapeld en, in tegenstelling tot de inline elementen, wordt de tekststroom afgebroken.
Inline blok
De inline-block geeft ons het beste van twee werelden: het combineert het element met de stroom van de tekst terwijl we padding , margin , height en vergelijkbare eigenschappen kunnen gebruiken die geen zichtbaar effect hebben op inline elementen.
Elementen met deze weergavewaarde gedragen zich als normale tekst en worden daarom beïnvloed door regels die de tekststroom regelen, zoals text-align . Standaard worden ze ook verkleind tot de kleinst mogelijke grootte om hun inhoud op te nemen.
<!--Inline: unordered list-->
<style>
li {
display : inline;
background : lightblue;
padding:10px;
border-width:2px;
border-color:black;
border-style:solid;
}
</style>
<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>
<!--block: unordered list-->
<style>
li {
display : block;
background : lightblue;
padding:10px;
border-width:2px;
border-color:black;
border-style:solid;
}
</style>
<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>
<!--Inline-block: unordered list-->
<style>
li {
display : inline-block;
background : lightblue;
padding:10px;
border-width:2px;
border-color:black;
border-style:solid;
}
</style>
<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>
geen
Een element dat de waarde none krijgt voor de weergave-eigenschap, wordt helemaal niet weergegeven.
Laten we bijvoorbeeld een div-element maken met een id van myDiv :
<div id="myDiv"></div>
Dit kan nu worden gemarkeerd als niet weergegeven door de volgende CSS-regel:
#myDiv {
display: none;
}
Wanneer een element is ingesteld om te worden display:none; de browser negeert elke andere lay-outeigenschap voor dat specifieke element (zowel position als float ). Voor dat element wordt geen vak weergegeven en het bestaan ervan in html heeft geen invloed op de positie van de volgende elementen.
Merk op dat dit anders is dan het instellen van de eigenschap visibility op hidden . visibility: hidden; instellen visibility: hidden; want een element zou het element niet op de pagina weergeven, maar het element zou toch de ruimte in het weergaveproces innemen alsof het zichtbaar zou zijn. Dit heeft dus invloed op de manier waarop de volgende elementen op de pagina worden weergegeven.
De waarde none voor de eigenschap display wordt vaak samen met JavaScript gebruikt om naar believen elementen weer te geven of te verbergen, waardoor het niet meer nodig is om ze daadwerkelijk te verwijderen en opnieuw te maken.
Om oude tafelstructuur te krijgen met div
Dit is de normale HTML-tabelstructuur
<style>
table {
width: 100%;
}
</style>
<table>
<tr>
<td>
I'm a table
</td>
</tr>
</table>
U kunt dezelfde implementatie als deze uitvoeren
<style>
.table-div {
display: table;
}
.table-row-div {
display: table-row;
}
.table-cell-div {
display: table-cell;
}
</style>
<div class="table-div>
<div class="table-row-div>
<div class="table-cell-div>
I behave like a table now
</div>
</div>
</div>