Propriete Display
Transféré par
Sian OnimamyPropriete Display
Transféré par
Sian OnimamyPROPRIETE DISPLAY
La propriété CSS display est une propriété permettant de modifier la façon dont un
élément va s’afficher dans la page : en ligne, sous forme de bloc, etc. et donc la façon
dont il va se comporter avec ses voisins.
Nous avons déjà eu l’occasion de parler de l’affichage des éléments dans la leçon
expliquant les différences entre les éléments de niveau block et de niveau inline.
En CSS3, la propriété display accepte de nombreuses valeurs différentes ce qui va
nous permettre de choisir précisément comment chaque élément HTML doit être
affiché dans la page.
Valeur Valeur
Comportement
raccourcie complète
none — L’élément ne s’affiche pas et ne génère aucune boite
L’élément ne génère aucune boite à l’affichage mais ses enfants
contents —
oui
Elément de niveau block (block-level) et boites internes de type
block block flow
block (block container)
Elément de niveau block (block-level) et boites internes de type
block flow-
flow-root block (block container) établissant un nouveau contexte de
root
formatage
Elément de niveau inline (inline-level) et boites internes de type
inline inline flow
inline
inline flow- Elément de niveau inline (inline-level) et boites internes de type
inline-block
root block (block container)
run-in run-in flow Elément de type run-in (inline avec des règles spéciales)
Valeur Valeur
Comportement
raccourcie complète
block flow Elément block-level avec block container de type block qui crée
list-item
list-item également une boite contenant un marqueur
inline flow Elément inline-level qui crée également une boite contenant un
inline list-item
list-item marqueur
Elément block-level avec boites internes flexibles (flex
flex block flex
container)
Elément inline-level avec boites internes flexibles (flex
inline-flex inline flex
container)
table block table Elément block-level avec boites internes de type table
inline-table inline table Elément inline-level avec boites internes de type table
grid block grid Elément block-level avec boites internes de type grille (grid)
inline-grid inline grid Elément inline-level avec boites internes de type grille (grid)
Valeur Valeur
Comportement
raccourcie complète
none — L’élément ne s’affiche pas et ne génère aucune boite
L’élément ne génère aucune boite à l’affichage mais ses enfants
contents —
oui
Elément de niveau block (block-level) et boites internes de type
block block flow
block (block container)
Elément de niveau block (block-level) et boites internes de type
block flow-
flow-root block (block container) établissant un nouveau contexte de
root
formatage
Elément de niveau inline (inline-level) et boites internes de type
inline inline flow
inline
inline flow- Elément de niveau inline (inline-level) et boites internes de type
inline-block
root block (block container)
run-in run-in flow Elément de type run-in (inline avec des règles spéciales)
block flow Elément block-level avec block container de type block qui crée
list-item
list-item également une boite contenant un marqueur
inline flow Elément inline-level qui crée également une boite contenant un
inline list-item
list-item marqueur
Elément block-level avec boites internes flexibles (flex
flex block flex
container)
Valeur Valeur
Comportement
raccourcie complète
Elément inline-level avec boites internes flexibles (flex
inline-flex inline flex
container)
table block table Elément block-level avec boites internes de type table
inline-table inline table Elément inline-level avec boites internes de type table
grid block grid Elément block-level avec boites internes de type grille (grid)
inline-grid inline grid Elément inline-level avec boites internes de type grille (grid)
