Skip to content

Commit

Permalink
Minor rewordings and fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
SphinxKnight committed Oct 24, 2023
1 parent 0340150 commit 474bca9
Showing 1 changed file with 16 additions and 17 deletions.
33 changes: 16 additions & 17 deletions files/fr/learn/css/css_layout/normal_flow/index.md
Original file line number Diff line number Diff line change
@@ -1,56 +1,55 @@
---
title: Cours normal
title: Flux normal
slug: Learn/CSS/CSS_layout/Normal_Flow
l10n:
sourceCommit: 45268b07c84a04b45d46bcdf104e2b33be00adcf
---

{{LearnSidebar}}

{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}}
{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.
Cet article décrit le flux normal des éléments, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.

<table class="standard-table">
<tbody>
<tr>
<th scope="row">Prérequis&nbsp;:</th>
<td>
Les fondamentaux du HTML (étudiez
<a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont les CSS fonctionnent (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).
Fondamentaux en HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>) et une idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">Introduction à CSS</a>).
</td>
</tr>
<tr>
<th scope="row">Objectif&nbsp;:</th>
<td>
Expliquer comment les navigateurs composent les pages web par défaut, avant que nous commencions à faire des modifications.
Expliquer comment les navigateurs composent les pages web par défaut, avant d'apporter des modifications.
</td>
</tr>
</tbody>
</table>

Comme nous l'avons expliqué dans la dernière leçon consacrée à la mise en page, les éléments d'une page web sont disposés dans un cours normal, si vous n'avez pas appliqué de feuilles de style CSS pour modifier leur comportement. Et, comme nous avons commencé à le découvrir, vous pouvez modifier le comportement des éléments en ajustant leur position dans le cours normal ou en les en retirant complètement. Commencer par un document solide, bien structuré et lisible dans le cours normal est la meilleure façon de commencer une page web. Cela garantit que votre contenu est lisible même si l'utilisateur utilise un navigateur très limité ou un dispositif tel qu'un lecteur d'écran qui lit le contenu de la page. En outre, comme le cours normal est conçu pour créer un document lisible, en commençant de cette manière, vous travaillez avec le document plutôt que de lutter contre lui en apportant des modifications à la mise en page.
Comme nous l'avons expliqué dans la dernière leçon consacrée à la mise en page, tant que vous n'avez pas appliqué de feuilles de style CSS, les éléments d'une page web sont disposés selon le flux normal. Et, comme nous avons commencé à le découvrir, il est possible de modifier le comportement des éléments en ajustant leur position dans le flux normal ou en les en retirant complètement. Commencer par un document solide, bien structuré et lisible dans le flux normal est la meilleure façon de commencer une page web. Cela garantit que votre contenu est lisible même si la personne utilise un navigateur très limité ou un dispositif tel qu'un lecteur d'écran qui lit le contenu de la page. En outre, comme le flux normal est conçu pour créer un document lisible, en commençant de cette manière, vous travaillez avec le document plutôt que de lutter contre lui en apportant des modifications à la mise en page.

Avant d'approfondir les diverses méthodes de mise en page, il serait bien de revoir certaines choses déjà exposées dans les modules précédents à propos du cours normal d'affichage d'un document.
Avant d'approfondir les diverses méthodes de mise en page, il serait bien de revoir certaines choses déjà exposées dans les modules précédents à propos du flux normal.

## Comment les éléments sont disposés par défaut ?
## Comment les éléments sont-ils disposés par défaut ?

Le processus commence lorsque les boîtes des éléments individuels sont disposées de telle manière que tout remplissage, bordure ou marge qu'ils ont est ajouté à leur contenu. C'est ce que nous appelons le **modèle de boîte**.
Le processus commence lorsque les boîtes des éléments individuels sont disposées de telle manière que leur remplissage, bordure et/ou marge est ajouté à leur contenu. C'est ce que nous appelons le **modèle de boîte**.

Par défaut, le contenu d'un [élément de bloc](/fr/docs/Glossary/Block-level_content) remplit l'espace en ligne disponible de l'élément parent qui le contient, en s'agrandissant le long de la dimension du bloc pour s'adapter à son contenu. La taille des [éléments en ligne](/fr/docs/Glossary/Inline-level_content) correspond simplement à la taille de leur contenu. Vous pouvez définir la largeur [`width`](/fr/docs/Web/CSS/width) ou la hauteur [`height`](/fr/docs/Web/CSS/height) pour certains éléments qui ont une propriété `display` par défaut avec la valeur `inline`, comme [`<img>`](/fr/docs/Web/HTML/Element/img), mais la valeur de `display` restera toujours `inline`.
Par défaut, le contenu d'un [élément de bloc](/fr/docs/Glossary/Block-level_content) remplit l'espace en ligne disponible de l'élément parent qui le contient, en s'agrandissant le long de la dimension du bloc pour s'adapter à son contenu. La taille des [éléments en ligne](/fr/docs/Glossary/Inline-level_content) correspond simplement à la taille de leur contenu. Vous pouvez définir la largeur ([`width`](/fr/docs/Web/CSS/width)) ou la hauteur ([`height`](/fr/docs/Web/CSS/height)) pour certains éléments dont la propriété `display` vaut `inline` par défaut, comme [`<img>`](/fr/docs/Web/HTML/Element/img), mais la valeur de `display` restera toujours `inline`.

Si vous voulez contrôler la taille d'un élément en ligne de cette manière, vous devez le paramétrer pour qu'il se comporte comme un élément de niveau bloc avec `display: block;` (ou même `display: inline-block;` qui mélange les caractéristiques des deux).

Ce qui précède explique le comportement des éléments pris individuellement, mais qu'en est-il de la façon dont les éléments interagissent les uns avec les autres&nbsp;? Le cours normal de mise en page (mentionné dans l'article d'introduction à la mise en page) est le système par lequel les éléments sont placés à l'intérieur de la fenêtre de vue du navigateur. Par défaut, les éléments de bloc sont disposés _dans le sens d'affichage des blocs_, basé sur le [mode d'écriture](/fr/docs/Web/CSS/writing-mode) de l'élément parent (_initial_&nbsp;: horizontal-tb). Chacun apparaît sur une nouvelle ligne en dessous de la dernière et ils sont séparés par la marge qui leur a été assignée. En anglais par exemple, ou tout autre mode d'écriture horizontal, de haut en bas, les éléments de bloc sont empilés verticalement.
Ce qui précède explique le comportement des éléments pris individuellement, mais qu'en est-il de la façon dont les éléments interagissent les uns avec les autres&nbsp;? Le flux normal de mise en page (mentionné dans l'article d'introduction à la mise en page) est le système par lequel les éléments sont placés à l'intérieur de la fenêtre de vue du navigateur. Par défaut, les éléments de bloc sont disposés _dans le sens d'affichage des blocs_, basé sur le [mode d'écriture (`writing-mode`)](/fr/docs/Web/CSS/writing-mode) de l'élément parent (la valeur initiale de la propriété `writing-mode` est `horizontal-tb`). Chacun apparaît sur une nouvelle ligne en dessous de la dernière et ils sont séparés par la marge qui leur a été assignée. En français par exemple, ou tout autre mode d'écriture horizontal qui progresse du haut vers le bas, les éléments de bloc sont empilés verticalement.

Les éléments en ligne se comportent différemment. Ils n'apparaissent pas sur de nouvelles lignes&nbsp;; au lieu de cela, ils se placent tous sur la même ligne avec tout contenu textuel adjacent (ou enveloppé) tant qu'il y a de la place pour le faire dans la largeur de l'élément de bloc parent. S'il n'y a pas d'espace, le contenu débordant sera déplacé sur une nouvelle ligne.

Si deux éléments adjacents verticalement ont tous deux une marge définie et que leurs marges se touchent, la plus grande des deux marges reste en place et la plus petite disparaît. C'est ce qu'on appelle [**l'effondrement des marges**](/fr/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing). La réduction des marges n'est pertinente que dans le **sens vertical**.
Si deux éléments adjacents verticalement ont tous deux une marge définie et que leurs marges se touchent, la plus grande des deux marges reste en place et la plus petite disparaît. C'est ce qu'on appelle [**la fusion des marges**](/fr/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing). La fusion des marges n'est pertinente que dans le **sens vertical**.

Voici un exemple simple expliquant cela&nbsp;:

```html
<h1>Cours d'un document de base</h1>
<h1>Flux d'un document de base</h1>

<p>
Je suis un élément de niveau bloc de base. Mes éléments de niveau bloc
Expand Down Expand Up @@ -99,12 +98,12 @@ span {
}
```

{{ EmbedLiveSample('comment_les_éléments_sont_disposés_par_défaut', '100%', 600) }}
{{EmbedLiveSample('', '100%', 600)}}

## Résumé

Dans cette leçon, vous avez appris les bases du cours normal la disposition par défaut des éléments CSS. En comprenant comment les éléments en ligne, les éléments en bloc et les marges se comportent par défaut, il sera plus facile de modifier leur comportement à l'avenir.
Dans cette leçon, vous avez appris les bases du flux normal, c'est-à-dire la disposition par défaut des éléments CSS. En comprenant comment les éléments en ligne, les éléments en bloc et les marges se comportent par défaut, il vous sera plus facile de modifier leur comportement à l'avenir.

Dans le prochain article, nous approfondirons ces connaissances en apportant des modifications aux éléments CSS à l'aide de [flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox).
Dans le prochain article, nous approfondirons ces connaissances en apportant des modifications aux éléments CSS à l'aide des [boîtes flexibles (<i lang="en">flexbox</i>)](/fr/docs/Learn/CSS/CSS_layout/Flexbox).

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

0 comments on commit 474bca9

Please sign in to comment.