CSS
Contrôle de disposition

Syntaxe

• affichage: aucun | inline | bloc | item de liste | inline-list-item | bloc en ligne | table en ligne | table | cellule de table | colonne de table | table-colonne-groupe | groupe de pieds de table | table-en-tête-groupe | rangée de table | table-rangée-groupe | flex | inline-flex | grille | grille en ligne | rodage | rubis | base de rubis | ruby-text | ruby-base-container | ruby-text-container | Contenu;

Paramètres

La propriété d'affichage

La propriété CSS d' display est fondamentale pour contrôler la disposition et le flux d'un document HTML. La plupart des éléments ont une valeur d' display par défaut de type block ou inline (bien que certains éléments aient d'autres valeurs par défaut).

En ligne

Un élément en inline n'occupe que la largeur nécessaire. Il empile horizontalement avec d'autres éléments du même type et peut ne pas contenir d'autres éléments non intégrés.

<span>This is some <b>bolded</b> text!</span>

Comme démontré ci-dessus, deux éléments en inline , <span> et <b> , sont en ligne (d'où le nom) et ne rompent pas le flux du texte.

Bloc

Un élément de block occupe la largeur maximale disponible de son élément parent. Il commence par une nouvelle ligne et, contrairement aux éléments en inline , ne restreint pas le type d'éléments qu'il peut contenir.

<div>Hello world!</div><div>This is an example!</div>

L'élément div est au niveau du bloc par défaut et, comme indiqué ci-dessus, les deux éléments de block sont empilés verticalement et, contrairement aux éléments en inline , le flux du texte est interrompu.

Bloc Inline

La valeur inline-block nous donne le meilleur des deux mondes: elle mélange l'élément avec le flux du texte tout en nous permettant d'utiliser des propriétés de padding , de margin , de height et similaires qui n'ont aucun effet visible sur inline éléments en inline .

Les éléments avec cette valeur d'affichage agissent comme s'ils étaient du texte normal et, par conséquent, ils sont affectés par les règles contrôlant le flux de texte, telles que text-align . Par défaut, ils sont réduits à la plus petite taille possible pour accueillir leur contenu.

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

aucun

Un élément auquel est donnée la valeur none à sa propriété d'affichage ne sera pas affiché du tout.

Par exemple, créons un élément div avec un identifiant de myDiv :

<div id="myDiv"></div>

Cela peut maintenant être marqué comme n'étant pas affiché par la règle CSS suivante:

#myDiv {
    display: none;
}

Lorsqu'un élément a été défini pour être display:none; le navigateur ignore toutes les autres propriétés de mise en page pour cet élément spécifique (à la fois la position et le float ). Aucune case ne sera rendue pour cet élément et son existence en HTML n’affecte pas la position des éléments suivants.

Notez que cela diffère de la définition de la propriété de visibility sur hidden . Réglage de la visibility: hidden; car un élément n'afficherait pas l'élément sur la page mais l'élément occuperait toujours l'espace dans le processus de rendu comme s'il était visible. Cela affectera donc la façon dont les éléments suivants sont affichés sur la page.

La valeur none pour la propriété display est généralement utilisée avec JavaScript pour afficher ou masquer des éléments à volonté, ce qui élimine le besoin de les supprimer et de les recréer.

Pour obtenir l'ancienne structure de table en utilisant div

Ceci est la structure de table HTML normale

<style>
    table {
        width: 100%;
    }
</style>

<table>
  <tr>
    <td>
        I'm a table
    </td>
  </tr>
</table>

Vous pouvez faire la même implémentation comme celle-ci

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