Display - noelno/dovelei GitHub Wiki
- 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)
- les uns à la suite des autres
- occupe la place prise par son contenu, et ne peut être dimensionné ou positionné (
width
etheight
sans effet). - les marges (
margin
etpadding
) s'appliquent toujours, mais seules les marges latérales (-left
et-right
) ont un effet sur le contenu qui l'entoure
- 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
- rendu de type block
- bénéficie des propriétés CSS list-*
- 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.
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
.
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
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.
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
Représente une colonne de cellules.
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.
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 rendulist-item
pour pouvoir afficher des puces à côté - conférer à une
<div>
un rendutable-cell
pour pouvoir centrer verticalement du texte à l'intérieur - conférer à une
<div>
un rendu 'table-caption' et à ses soeurs un rendutable-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
etfloat
n'ont pas d'effet sur les éléments endisplay: none
-
float
n'a pas d'effet sur les éléments enposition: absolute
, etdisplay
prendra la valeur calculéetable
,block
oulist-item
selon la valeur spécifiée - un élément en
float
donnera à display la valeur calculéetable
,block
oulist-item
selon la valeur spécifiée
- http://stackoverflow.com/a/15940240
- http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html
- http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html
- http://www.alsacreations.com/tuto/lire/1523-le-modele-tabulaire-en-css.html (cf. la dernière page pour des exemples d'application concrète)
- Cross-browser inline-block | Mozilla blog