From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../fr/web/css/visual_formatting_model/index.html | 179 +++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 files/fr/web/css/visual_formatting_model/index.html (limited to 'files/fr/web/css/visual_formatting_model') diff --git a/files/fr/web/css/visual_formatting_model/index.html b/files/fr/web/css/visual_formatting_model/index.html new file mode 100644 index 0000000000..d9ac8b3f09 --- /dev/null +++ b/files/fr/web/css/visual_formatting_model/index.html @@ -0,0 +1,179 @@ +--- +title: Modèle de mise en forme visuelle +slug: Web/CSS/Modèle_de_mise_en_forme_visuelle +tags: + - CSS + - Intermédiaire + - NeedsUpdate +translation_of: Web/CSS/Visual_formatting_model +--- +
{{CSSRef}}
+ +

En CSS, le modèle de mise en forme visuelle est un algorithme qui traite un document afin de l'afficher sur un support visuel. Chaque élément du document est ainsi transformé en zéro, une ou plusieurs boîtes qui s'inscrivent dans le modèle de boîtes CSS. La disposition de chaque boîte est dictée par :

+ + + +

Le modèle affiche une boîte par rapport au bord du bloc qui la contient. Généralement, une boîte devient le bloc contenant pour ses éléments descendants. Toutefois, une boîte n'est pas contrainte dans son bloc contenant, le contenu d'une boîte peut parfois dépasser (ce qu'on appelle en anglais overflow).

+ +

Génération de la boîte

+ +

Lors de cette étape, on crée les boîtes à partir des éléments du document. Les boîtes générées sont de différents types et ces types ont un impact sur la mise en forme visuelle. Le type de boîte générée dépend de la valeur de la propriété {{cssxref("display")}}.

+ +

Les éléments de bloc et les boîtes de bloc

+ +

Un élément est dit « de bloc » lorsque la valeur calculée de la propriété {{cssxref("display")}} qui lui est appliquée vaut : block, list-item ou table. Un élément de bloc est représenté sous la forme d'un bloc (comme un paragraphe par exemple) et les blocs sont empilés verticalement les uns sur les autres.

+ +

Chaque boîte de bloc contribue au contexte de mise en forme des blocs. Chaque élément de bloc génère au moins une boîte de niveau bloc, qu'on appelle la boîte de bloc principale. Certains éléments (comme les éléments d'une liste par exemple) génèrent d'autres boîtes afin de gérer les puces ou d'autres éléments typographiques.

+ +

La boîte de bloc principale contient les boîtes générées par les descendants ete le contenu généré. Cette boîte participe au schéma de positionnement.

+ +

venn_blocks.png

+ +

Une boîte de bloc peut également un conteneur de blocs. Un conteneur de blocs est une boîte qui ne contient que d'autres boîtes de bloc ou qui crée un contexte de formatage en ligne et qui ne contient alors que des boîtes en ligne. Attention, les notions de boîtes de bloc et de conteneurs de blocs ne sont pas identiques. La première décrit la façon dont la boîte se comporte avec ses parents et ses voisins et le seconde définit la façon dont elle interagit avec ses descendants. Certaines boîtes de blocs, telles que les tableaux, ne sont pas des conteneurs de blocs. Réciproquement, certains conteneurs de blocs (tels que les cellules de tableau non remplacées) ne sont pas des boîtes de bloc.

+ +

Les boîtes de bloc qui sont également des conteneurs de blocs sont appelées des boîtes-bloc.

+ +

Les boîtes de bloc anonymes

+ +

Dans certains cas, l'algorithme doit ajouter certaines boîtes supplémentaires. Or, les sélecteurs CSS ne permettent pas de mettre en forme ou de nommer ces boîtes, elles sont donc appelées boîtes de bloc anonymes.

+ +

Les sélecteurs ne permettent pas de manipuler la mise en forme de ces boîtes. Aussi, pour ces boîtes, toutes les propriétés CSS utilisant l'héritage auront la valeur {{cssxref("inherit")}} et toutes les propriétés CSS qui ne sont pas héritées auront la valeur initial.

+ +

Les boîtes qui contiennent des blocs ne contiennent que des boîtes en ligne ou que des boîtes en blocs. Mais souvent, le document contient un mélange des deux. Dans ces cas, des boîtes de bloc anonymes sont créées autour des boîtes en lignes adjacentes.

+ +

Si on prend le code HTML suivant, mis en forme avec les règles par défaut (display:block) :

+ +
<div>
+   Some inline text
+   <p>followed by a paragraph</p>
+   followed by more inline text.
+</div>
+
+ +

On aura deux boîtes de bloc anonymes qui seront créées : une pour le texte avant le paragraphe et une pour le texte après. On aura alors la structure suivante :
+   anonymous_block-level_boxes.png

+ +

À la différence de la boîte des éléments {{HTMLElement("p")}}, les développeurs ne peuvent pas contrôler la mise en forme des boîtes anonymes. Les propriétés qui héritent des éléments parents récupèreront la valeur obtenue pour l'élément {{HTMLElement("div")}} et les autres propriétés auront la valeur initial.

+ +

Un autre scénario peut amener à la création de boîtes de bloc anonyme : lorsqu'une boîte en ligne contient une ou plusieurs boîtes de bloc. Dans ce cas, la boîte qui contient la boîte de bloc est divisée en deux boîtes en ligne : une avant et une après la boîte de bloc. Toutes les boîtes en ligne avant la boîte de bloc sont englobées dans une boîte de bloc anonyme et il en va de même pour les boîtes en ligne qui suivent la boîte de bloc. Aussi, la boîte de bloc devient un voisin de deux boîtes de bloc anonymes qui contiennent les éléments en ligne.

+ +

S'il y a plusieurs boîtes de bloc sans contenu en ligne entre elles, les boîtes de bloc anonymes sont créées avant et après ces boîtes.

+ +

Si on prend le code HTML suivant, pour lequel {{HTMLElement("p")}} aura display:inline et {{HTMLElement("span")}} aura display:block :

+ +
<p>
+  Some <em>inline</em> text
+  <span>followed by a paragraph</span>
+  followed by more inline text.
+</p>
+ +

Deux boîtes de bloc anonymes sont créées : une pour le texte avant l'élément <span> et une pour le texte qui suit cet élément. On a alors la structure suivante :

+ +

+ +

Les éléments en ligne et les boîtes en ligne

+ +

Un élément est dit « en ligne » lorsque la valeur de sa propriété CSS {{cssxref("display")}} vaut : inline, inline-block ou inline-table. Visuellement, un tel élément est organisé sur des lignes qui se suivent les unes les autres avec d'autre contenu en ligne. Généralement, il s'agit du contenu d'un paragraphe (éventuellement mis en forme).

+ +

Les éléments en ligne génèrent des boîtes en lignes qui contribuent au contexte de mise en forme en ligne.

+ +

Les boîtes en lignes atomiques ne peuvent pas être divisées en plusieurs lignes au sein d'un contexte de mise en forme.

+ +
<style>
+  span {
+    /* La valeur par défaut */
+    display:inline;
+  }
+</style>
+<div style="width:20em;">
+   Le texte dans le span <span>peut être divisé
+   en plusieurs lignes</span> dans une boîte en
+   ligne.
+</div>
+
+ +
<style>
+  span {
+    display:inline-block;
+  }
+</style>
+<div style="width:20em;">
+   Le texte dans le span <span>ne peut pas être
+   divisé en plusieurs lignes car</span> il est
+   dans une boîte de type inline-block.
+</div>
+
+ +

Les boîtes en ligne anonymes

+ +

Comme pour les boîtes de bloc, il existe quelques cas pour lesquels des boîtes en lignes sont automatiquement créées par le moteur CSS. Ces boîtes en ligne sont également anonymes et ne peuvent être ciblées par les sélecteurs. Pour les propriétés qui fonctionnent avec l'héritage, ces boîtes hériteront de la valeur de la propriété relative à l'élément parent, pour les autres, elles vaudront initial.

+ +

La plupart du temps, une boîte en ligne anonyme est créée lorsque du texte se trouve être un enfant direct d'une boîte en bloc, ce qui crée un contexte de mise en forme en ligne. Dans ce cas, le texte est inclus dans la plus grande boîte en ligne qui puisse être et c'est cette boîte qui est la boîte anonyme. Par ailleurs, le contenu blanc qui serait retiré par la propriété {{cssxref("white-space")}} ne génère pas de boîtes en ligne car celles-ci seraient vides.

+ +

Les autres types de boîte

+ +

Les boîtes de ligne

+ +

Les boîtes de ligne sont générées dans un contexte de mise en forme en ligne afin de représenter une ligne de texte. Au sein d'une boîte en bloc, un boîte de ligne s'étend d'un bord à l'autre de la boîte. Lorsqu'il y a une disposition flottante, la boîte de ligne démarre au bord le plus à droite de la partie flottante qui est située à gauche et finit à la droite du bord gauche suivant.

+ +

Ces boîtes sont uniquement utilisées par le moteur et les développeurs web ne devraient pas avoir à s'en préoccuper.

+ +

Les types de boîtes liés au modèle CSS

+ +

En plus des boîtes en ligne et des boîtes de bloc, CSS définit plusieurs autres modèles de contenu qui peuvent être appliqués aux éléments. Ces modèles définissent des types de boîtes supplémentaires :

+ + + +

Modes de positionnement

+ +

Une fois les boîtes générées, le moteur CSS doit les disposer les unes par rapport aux autres. Pour ce faire, il utilise un des algorithmes suivants :

+ + + +

Le mode normal

+ +

Dans le mode de positionnement normal, les boîtes sont disposées les unes après les autres. Pour un contexte de mise en forme de bloc, elles seront empilées verticalement et pour un contexte de mise en forme en ligne, elles se suivront horizontalement. Le mode de disposition normal est déclenché lorsque la propriété CSS {{cssxref("position")}} vaut static ou relative et si la propriété CSS {{cssxref("float")}} vaut none.

+ +

On a deux cas de figure pour le mode normal : le positionnement statique et le positionnement relatif.

+ + + +

Le mode flottant

+ +

Avec le mode de positionnement flottant, certaines boîtes sont placées au début ou à la fin de ligne courante. Le texte (et tout ce qui se trouve dans le flux normal) épouse donc le contour des boîtes flottantes (sauf si la propriété {{cssxref("clear")}} dicte un autre comportement).

+ +

Pour qu'une boîte soit une boîte flottante, on utilisera la propriété {{cssxref("float")}} avec une valeur différente de none et la propriété {{cssxref("position")}} avec static ou relative. Si {{cssxref("float")}} vaut left, la boîte flottante sera positionnée au début de la ligne de la boîte englobante et si elle vaut right, elle sera à la fin de la ligne.

+ +

Le mode absolu

+ +

En mode absolu, les boîtes sont entièrement retirées du flux normal et n'interagissent plus avec le flux. Elles sont positionnées de façon relative à leur bloc englobant grâce aux propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.

+ +

Un élément est positionné de façon absolue lorsque la propriété {{cssxref("position")}} vaut absolute ou fixed.

+ +

Pour un élément positionné de façon fixe, le bloc englobant sera la zone d'affichage (viewport) et la position de l'élément est absolue par rapport à la zone d'affichage. Faire défiler le contenu ne modifie pas la position de l'élément.

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf