Display - noelno/dovelei GitHub Wiki

Valeurs de display

block

  • les uns au-dessus des autres (retour à la ligne automatique)
  • par défaut, occupe 100% de la largeur du bloc parent, mais peut être dimensionné
  • la hauteur est déterminée par le contenu (shrink-to-fit)

inline

  • les uns à la suite des autres
  • occupe la place prise par son contenu, et ne peut être dimensionné ou positionné (width et height sans effet).
  • les marges (margin et padding) s'appliquent toujours, mais seules les marges latérales (-left et -right) ont un effet sur le contenu qui l'entoure

inline-block (input, select)

  • comme les éléments inline : les uns à la suite des autres, occupe la place prise par son contenu
  • comme les éléments block : peut être dimensionné
  • vertical-align fonctionne
  • génère des espaces blancs autour des blocs (heureusement supprimables via white-space: no-wrap en CSS3 ou par d'autres techniques pour les anciens navigateurs)

Quelques problèmes de compatibilité sur IE6 et 7 peuvent être contournés par des hacks, un autre bug de redimensionnement existe sur IE8

Listes

list-item (li)

  • rendu de type block
  • bénéficie des propriétés CSS list-*

Modèle tabulaire

table et table-inline (table)

  • table : rendu de type block
  • table-inline : rendu de type inline

Mode de rendu incontournable pour le conteneur parent si vous souhaitez utiliser le modèle tabulaire.
En effet si un élément au rendu table-row existe sans que celui-ci n'ait de parent possédant un rendu table, un élément anonyme de rendu table sera crée automatiquement par le navigateur autour de l'élément table-row. Dans le cas où il s'agirait de plusieurs frères table-row sans ancêtre table, ces frères se retrouveraient englobés dans le même élément table anonyme.

table-row (tr)

S’affiche comme une rangée de cellules.

Comme pour l'élément table, si vous créez des éléments au rendu table-cell sans que le parent ne soit de rendu table-row, un élément anonyme de rendu table-row se créera automatiquement autour de ces éléments.
Cela fonctionne aussi dans l'autre sens : si un table-row contient des éléments ayant un autre rendu que table-cell, un élément anonyme de rendu table-cell viendra englober ces éléments.
Dans le cas où ce table-row contiendrait des blocs dont certains sont table-cell et d'autres non, les blocs non table-cell adjacents seraient regroupés dans des éléments anonymes table-cell.

Exemple. Considérons la rangée suivante : BCBBC
B représente un élément rendu en bloc, C un élément rendu en table-cell.
Cette rangée de cinq éléments est implicitement englobée dans un table-row anonyme, lui-même englobé dans un table anonyme.
Les B se retrouvent alors englobés dans des éléments anonymes table-cell : le premier B dans l'un, les deux autres B dans un deuxième élément anonyme.
Cette rangée se constitue donc de quatre cellules, dont deux anonymes.
La deuxième cellule anonyme faisant cohabiter deux éléments de rendu bloc, ceux-ci se retrouvent donc affichés l'un sur l'autre (c'est leur comportement naturel) au lieu de l'un à côté de l'autre comme en rendu table-cell.

table-row-group (tbody), table-header-group (thead), table-footer-group (tfoot)

S’affiche comme une rangée de cellules. table-header-group s'affiche au-dessus des autres rangées table-header-group s'affiche sous les autres rangées

table-cell (td, th)

Comme inline-block : les uns à la suite des autres, occupe la place prise par son contenu, peut être dimensionné Le bloc ne conserve pas sa largeur (width) si la fenêtre se réduit, il reste coûte que coûte dans le bloc parent
La hauteur, si elle n'est pas spécifiée, est déterminée par la taille de la cellule la plus remplie.

La propriété table-layout

Table-layout calcule la largeur des blocs enfants ayant pour rendu table-cell. Par défaut les blocs contenant le plus de contenu sont plus larges. Si auto, la largeur du bloc dépend par ordre de priorité :

  • du contenu, même si sa largeur est plus élevée que celle spécifiée pour l'élément ou son parent
  • de la largeur de l'élément parent si elle est spécifiée
  • puis de la largeur de l'élément lui-même si elle est spécifiée Si fixed, la largeur du bloc dépend par ordre de priorité :
  • de la largeur de l'élément parent si elle est spécifiée (dans ce cas le contenu déborde du bloc)
  • du contenu, si sa largeur est plus élevée que celle spécifiée pour l'élément ou son parent
  • puis de la largeur de l'élément lui-même si elle est spécifiée

Autres remarques :

  • Pour les marges externes, margin ne fonctionne pas. Utiliser border.
  • vertical-align fonctionne

table-column (col)

Représente une colonne de cellules.

table-column-group (col)

Représente un groupe de colonnes. Si vous créez des éléments au rendu table-column sans que le parent ne soit de rendu table-column-group, un élément anonyme se créera automatiquement autour de ces éléments.

table-caption (caption)

Représente une légende de tableau. Selon la valeur de la propriété caption-size, la légende est automatiquement affichée soit tout en haut du tableau, soit tout en bas.

##Utilisation Un mode de rendu n'étant pas affecté obligatoirement à un ou plusieurs éléments, il est tout à fait possible de "détourner" l'usage d'un mode de rendu du modèle tabulaire pour pouvoir se servir de propriétés CSS réservées à ce mode :

  • conférer à des <div> un rendu list-item pour pouvoir afficher des puces à côté
  • conférer à une <div> un rendu table-cell pour pouvoir centrer verticalement du texte à l'intérieur
  • conférer à une <div> un rendu 'table-caption' et à ses soeurs un rendu table-row pour qu'elle s'affiche soit au-dessus de ses soeurs, soit en-dessous, et ce indépendamment de sa position dans le DOM
  • conférer à des <div> soeurs un rendu de tableau pour pouvoir maîtriser la taille de l'ensemble des <div> plutôt que la taille de chaque div individuellement.

##Interactions

  • position et float n'ont pas d'effet sur les éléments en display: none
  • float n'a pas d'effet sur les éléments en position: absolute, et display prendra la valeur calculée table, block ou list-item selon la valeur spécifiée
  • un élément en float donnera à display la valeur calculée table, block ou list-item selon la valeur spécifiée

Sources

⚠️ **GitHub.com Fallback** ⚠️