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>

Display: inline

<!--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>

Display: block

<!--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>

Display: inline-block

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>


Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow