path: root/files/fr/web/css/visual_formatting_model/index.md

---
title: Modèle de mise en forme visuelle
slug: Web/CSS/Visual_formatting_model
tags:
  - CSS
  - Intermédiaire
  - NeedsUpdate
translation_of: Web/CSS/Visual_formatting_model
original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle
---
<div>{{CSSRef}}</div>

<p>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 <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">le modèle de boîtes CSS</a>. La disposition de chaque boîte est dictée par :</p>

<ul>
 <li>Les dimensions de la boîte qui peuvent être définies explicitement, contraintes ou non</li>
 <li>Le type de la boîte : en ligne, en ligne et de niveau (<em>inline-level</em>), atomique, en bloc</li>
 <li>Le mode de positionnement : dans le flux normal, en flottement ou positionnée de façon absolue</li>
 <li>Les autres éléments présents dans l'arbre du document et notamment ses enfants et ses voisins</li>
 <li>La taille et la position de la zone d'affichage (<em>viewport</em>)</li>
 <li>Les dimensions intrinsèques des images qu'elle contient</li>
 <li>Éventuellement d'autres informations externes.</li>
</ul>

<p>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 <em>overflow</em>).</p>

<h2 id="Génération_de_la_boîte">Génération de la boîte</h2>

<p>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")}}.</p>

<h3 id="Les_éléments_de_bloc_et_les_boîtes_de_bloc">Les éléments de bloc et les boîtes de bloc</h3>

<p>Un élément est dit « de bloc » lorsque <a href="/fr/docs/Web/CSS/computed_value">la valeur calculée</a> de la propriété {{cssxref("display")}} qui lui est appliquée vaut : <code>block</code>, <code>list-item</code> ou <code>table</code>. 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.</p>

<p>Chaque boîte de bloc contribue au <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">contexte de mise en forme des blocs</a>. 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.</p>

<p>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.</p>

<p><img alt="venn_blocks.png" src="venn_blocks.png"></p>

<p>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.</p>

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

<h4 id="Les_boîtes_de_bloc_anonymes">Les boîtes de bloc anonymes</h4>

<p>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 <em>anonymes</em>.</p>

<p>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 <code>initial</code>.</p>

<p>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.</p>

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

<pre class="brush: html">&lt;div&gt;
   Some inline text
   &lt;p&gt;followed by a paragraph&lt;/p&gt;
   followed by more inline text.
&lt;/div&gt;
</pre>

<p>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 :<br>
   <img alt="anonymous_block-level_boxes.png" src="anonymous_block-level_boxes.png"></p>

<p>À 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 <code>initial</code>.</p>

<p>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.</p>

<p>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.</p>

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

<pre class="brush: html">&lt;p&gt;
  Some &lt;em&gt;inline&lt;/em&gt; text
  &lt;span&gt;followed by a paragraph&lt;/span&gt;
  followed by more inline text.
&lt;/p&gt;</pre>

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

<p><img alt="" src="anonymous_block_box_break.png"></p>

<h3 id="Les_éléments_en_ligne_et_les_boîtes_en_ligne">Les éléments en ligne et les boîtes en ligne</h3>

<p>Un élément est dit « en ligne » lorsque la valeur de sa propriété CSS {{cssxref("display")}} vaut : <code>inline</code>, <code>inline-block</code> ou <code>inline-table</code>. 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).</p>

<p>Les éléments en ligne génèrent des boîtes en lignes qui contribuent <a href="/fr/docs/CSS/Inline_formatting_context">au contexte de mise en forme en ligne</a>.</p>

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

<pre class="brush: html">&lt;style&gt;
  span {
    /* La valeur par défaut */
    display:inline;
  }
&lt;/style&gt;
&lt;div style="width:20em;"&gt;
   Le texte dans le span &lt;span&gt;peut être divisé
   en plusieurs lignes&lt;/span&gt; dans une boîte en
   ligne.
&lt;/div&gt;
</pre>

<pre class="brush: html">&lt;style&gt;
  span {
    display:inline-block;
  }
&lt;/style&gt;
&lt;div style="width:20em;"&gt;
   Le texte dans le span &lt;span&gt;ne peut pas être
   divisé en plusieurs lignes car&lt;/span&gt; il est
   dans une boîte de type inline-block.
&lt;/div&gt;
</pre>

<h4 id="Les_boîtes_en_ligne_anonymes">Les boîtes en ligne anonymes</h4>

<p>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é <code>relative</code> à l'élément parent, pour les autres, elles vaudront <code>initial</code>.</p>

<p>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.</p>

<h3 id="Les_autres_types_de_boîte">Les autres types de boîte</h3>

<h4 id="Les_boîtes_de_ligne">Les boîtes de ligne</h4>

<p><em>Les boîtes de ligne</em> 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.</p>

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

<h4 id="Les_types_de_boîtes_liés_au_modèle_CSS">Les types de boîtes liés au modèle CSS</h4>

<p>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 :</p>

<ul>
 <li>Le modèle de contenu pour les tableaux utilise des boîtes englobant les tableaux, des boîtes de tableau et des boîtes de légende</li>
 <li>Le modèle de contenu à plusieurs colonnes permet de créer des boîtes de colonne entre la boîte englobante et le contenu<em>.</em></li>
 <li>Les modèles de contenu expérimentaux en grille (<em>CSS Grid</em>) ou avec les boîtes flexibles (<em>flexbox</em>) définissent d'autres types de boîtes.</li>
</ul>

<h2 id="Modes_de_positionnement">Modes de positionnement</h2>

<p>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 :</p>

<ul>
 <li>Le mode de positionnement normal positionne les boîtes les unes après les autres</li>
 <li>Le mode de positionnement flottant permet d'extraire une boîte du flux normal et de la placer sur le côté de la boîte englobante</li>
 <li>Le mode de positionnement absolu permet de placer une boîte dans un système de coordonnées absolues, basée sur l'élément englobant. Un élément positionné de façon absolue peut recouvrir d'autres éléments.</li>
</ul>

<h3 id="Le_mode_normal">Le mode normal</h3>

<p>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 <code>static</code> ou <code>relative</code> et si la propriété CSS {{cssxref("float")}} vaut <code>none</code>.</p>

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

<ul>
 <li>En positionnement statique (obtenu avec la valeur <code>static</code> pour la propriété {{cssxref("position")}}), les boîtes sont dessinées à l'emplacement exact dicté par le flux normal.</li>
 <li>En positionnement relatif (obtenu lorsque la propriété {{cssxref("position")}} vaut <code>relative</code>), les boîtes sont dessinées avec un décalage défini par les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.</li>
</ul>

<h3 id="Le_mode_flottant">Le mode flottant</h3>

<p>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).</p>

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

<h3 id="Le_mode_absolu">Le mode absolu</h3>

<p>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")}}.</p>

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

<p>Pour un élément positionné de façon fixe, le bloc englobant sera la zone d'affichage (<em>viewport</em>) 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.</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
 <li>{{css_key_concepts}}</li>
</ul>