aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/visual_formatting_model
diff options
context:
space:
mode:
authorSphinxKnight <SphinxKnight@users.noreply.github.com>2021-09-17 20:15:31 +0200
committerGitHub <noreply@github.com>2021-09-17 20:15:31 +0200
commit3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f (patch)
tree09fe8f8a5fae5235b62918e8b7161fd34480b8d0 /files/fr/web/css/visual_formatting_model
parent3518481e9190f19bbf81741704f45cb3c1761758 (diff)
downloadtranslated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.tar.gz
translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.tar.bz2
translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.zip
Prepare CSS section for Markdown conversion (#2307)
* Removes summary / seoSummary classes * Remove div class=hidden and some notranslate * Remove hidden paragraphs for live sample * Remove hidden paragraphs for live sample - take 2 * Remove other hidden div and p - updated w/ en-US when necessary * Remove ids * Remove notranslate class * Fix typo which broke build * remove div class='index' * remove useless <span style=...> * remove non typographical sups * remove non typographical subs * remove blockindicator and fix some div.note * fix build :/ * remove useless classes * fix build - again :x * fix unhandled elements 1/N + embedlivesample build fail * fix div.warning * Fix fixable flaws - hoping to reduce error conversion * Remove unecessary images (same as en-US) * fix div notes * fix warnings * fix some dl handling * fix dls * Fix a bunch of conversion errors * rm unhandled figures * Fix other set of issues and revamp easing-function page * Fix some one-offs conversion errors (incl. deki files) * fix the rest of one-off conversion issues * Fix last dl standing
Diffstat (limited to 'files/fr/web/css/visual_formatting_model')
-rw-r--r--files/fr/web/css/visual_formatting_model/index.html20
1 files changed, 10 insertions, 10 deletions
diff --git a/files/fr/web/css/visual_formatting_model/index.html b/files/fr/web/css/visual_formatting_model/index.html
index 69a641a3f7..2d49388aa8 100644
--- a/files/fr/web/css/visual_formatting_model/index.html
+++ b/files/fr/web/css/visual_formatting_model/index.html
@@ -10,7 +10,7 @@ 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="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">le modèle de boîtes CSS</a>. La disposition de chaque boîte est dictée par :</p>
+<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>
@@ -30,13 +30,13 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle
<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/Valeur_calculée">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>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/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>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" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png"></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>
@@ -52,7 +52,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle
<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 notranslate">&lt;div&gt;
+<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.
@@ -60,7 +60,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle
</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="/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p>
+   <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>
@@ -70,7 +70,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle
<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 notranslate">&lt;p&gt;
+<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.
@@ -78,7 +78,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle
<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="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></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>
@@ -88,7 +88,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle
<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 notranslate">&lt;style&gt;
+<pre class="brush: html">&lt;style&gt;
span {
/* La valeur par défaut */
display:inline;
@@ -101,7 +101,7 @@ original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle
&lt;/div&gt;
</pre>
-<pre class="brush: html notranslate">&lt;style&gt;
+<pre class="brush: html">&lt;style&gt;
span {
display:inline-block;
}