Propriété display en css

Cette propriété définit le type de boîte de rendu à utiliser pour un élément donné.
Pour un langage tel que le HTML où les éléments existants ont un comportement bien défini, les valeurs par défaut de la propriété display sont extraites des comportements décrits dans les spécifications HTML ou depuis la feuille de style par défaut du navigateur ou de l'utilisateur.
Pour des langages où le comportement de l'affichage n'est pas défini (comme XML), la valeur par défaut est en inline.

En plus des nombreux types d'affichage de boîte autorisés, une autre valeur, none, permet de ne pas afficher un élément ; tous les descendants sont également cachés. Le document est rendu comme si cet élément n'existait pas dans l'arbre du document.
Cette valeur offre de nombreuses possibilités, mais elle doit être utilisé avec précaution.

* Valeur initiale : inline
* S'applique à : tous les éléments
* Héritée : non
* Pourcentages : N/A
* Média : Visual
* Valeur calculée : comme spécifiée, sauf pour l'élément racine, les éléments flottants, et les éléments positionnés en absolu.

Éléments bloc contre éléments en-ligne

* Les éléments de type bloc créent des blocs de contenus verticalement distincts (dans le contexte visuel) - généralement en utilisant des retours à la ligne avant et après le contenu. Seule cette valeur de display est permise pour générer des éléments positionnés. Le comportement de type bloc est illustré par des éléments HTML tels que blockquote, div ou encore les en-têtes hx. Les valeur de la propriété display créant un élément de type bloc sont : block, list-item, table, compact et run-in.

* Les éléments de type en-ligne ne créent pas de bloc distinct de contenu ; le contenu de l'élément est rendu à l'aide d'une boîte ligne (le contenu est distribué ligne par ligne dans l'élément bloc physique ou virtuel le contenant). Le comportement de type en-ligne est illustré par des éléments HTML tels que le formatage physique ou virtuel des caractères, les images non flottantes et les contenus non marqués. Les valeurs de la propriété display créant un élément de type en-ligne sont : inline, inline-table, compact et run-in

Les valeurs possibles

La valeur de display peut prendre l'une des valeurs suivantes :
ValeursExplications
inherit Définit explicitement la valeur de cette propriété à celle de l'élément parent.
none Cette valeur « cache » un élément, il n'est plus affiché (cela n'a aucun effet sur la mise en page) ; tous les descendants sont également cachés inconditionnellement. Le document est rendu comme si l'élément, et ses descendants, n'existaient pas dans l'arbre du document. Pour rendre les dimensions d'un élément boîte dans le schéma de formatage du document, et faire ainsi apparaître son contenu, voir la propriété visibility.
inline L'élément génère une ou plusieurs boîtes en-ligne.
block L'élément génère une boîte de type bloc.
inline-block Introduite dans CSS 2.1. L'élément génère une boîte de type bloc that will be flowed entouré par le contenu comme si c'était une simple boîte en-ligne (se comporte comme le ferait un élément replacé).
list-item L'élément génère une boîte bloc pour le contenu et une boîte en-ligne de liste d'éléments séparée.
marker Cela entraîne la création d'un nouvelle boîte marker à côté de la boîte de contenu. Le contenu généré en utilisant les pseudo-éléments :before et :after avec cette valeur d'affichage placera le contenu dans la boîte marker. Si un marker est utilisé avec un autre type d'élément, la valeur sera traitée comme in-line. La position du marker sera en dehors de la boîte bloc.
compact Selon le contexte, cette valeur de la propriété display crée soit une boîte en-ligne, soit une boîte bloc. Dans tous les cas, les différentes propriétés CSS peuvent s'appliquer à l'élément compact. Dans un contexte de type bloc, l'élément compact est rendu dans la marge droite ou la marge gauche de l'élément bloc. L'élément bloc participe au calcul de la hauteur de ligne de la ligne courante, et la valeur de la propriété vertical-align est relative à l'élément bloc.
run-in Selon le contexte, cette valeur de la propriété display crée soit une boîte en-ligne, soit une boîte bloc. Dans tous les cas, les différentes propriétés CSS peuvent s'appliquer à l'élément run-in. Les propriétés de l'élément run-in sont héritées de son élément parent dans l'arbre du document, elles ne le sont pas de l'élément bloc auquel il participe.
table-header-group|
table-footer-group
L'élément se comporte comme les éléments de tableau HTML thead et tfoot correspondants desquels il tient son nom.
table L'élément se comporte comme la balise de tableau HTML correspondant de laquelle cette valeur tient son nom. La valeur inline-table n'a pas de correspondance directe en HTML.
inline-table L'élément se comporte comme la balise de tableau HTML correspondant de laquelle cette valeur tient son nom. La valeur inline-table n'a pas de correspondance directe en HTML.
table-caption L'élément se comporte comme la balise de tableau HTML correspondant de laquelle cette valeur tient son nom. La valeur inline-table n'a pas de correspondance directe en HTML.
table-cell L'élément se comporte comme la balise de tableau HTML correspondant de laquelle cette valeur tient son nom. La valeur inline-table n'a pas de correspondance directe en HTML.
table-row|
table-row-group
L'élément se comporte comme la balise de tableau HTML correspondant de laquelle cette valeur tient son nom. La valeur inline-table n'a pas de correspondance directe en HTML.
table-column|
table-column-group
L'élément se comporte comme la balise de tableau HTML correspondant de laquelle cette valeur tient son nom. La valeur inline-table n'a pas de correspondance directe en HTML.
Source : http://developer.mozilla.org


© latarteauchips 2024
Volet automatique | Les amis des loisirs : Sorties spectacles paris| Chalet Vosges | Bioénergétique | Visites Paris |
artisan web
achat cash de votre mobile et recyclage telephone
Revendez vos mobiles chez Mister Reprise
Astuces & trucs
Css
Divertissement
Html
Javascript
Linux
Outils
Php
Scripts
Sécurité failles
setia industrie logo
Setia Industries