1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
---
title: Cours normal
slug: Apprendre/CSS/CSS_layout/Normal_Flow
translation_of: Learn/CSS/CSS_layout/Normal_Flow
---
<div>{{LearnSidebar}}</div>
<p>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}}</p>
<p class="summary">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.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Prérequis :</th>
<td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_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>).</td>
</tr>
<tr>
<th scope="row">Objectif :</th>
<td>Expliquer comment les navigateurs composent les pages web par défaut, avant que nous commencions à faire des modifications.</td>
</tr>
</tbody>
</table>
<p>Comme indiqué dans la précédente leçon d'introduction à la mise en page, les éléments d'une page Web suivent un cours normal de mise en page, si vous n'avez pas appliqué de CSS pour changer leur comportement. Et, comme nous avons commencé à le découvrir, vous pouvez changer le comportement des éléments, soit en ajustant leur position dans ce cours normal, soit en les sortant totalement de ce cours. Commencer par un document solide, bien structuré et lisible en cours normal est la meilleure façon de commencer n'importe quelle page Web. Cela garantit un contenu lisible, même si l'utilisateur visite le site avec un navigateur peu performant ou un dispositif tel qu'un lecteur d'écran lisant le contenu de la page. De plus, comme le cours normal a été pensé pour faire en sorte que le document soit lisible, en commençant de cette façon, vous travaillez avec le document au lieu de vous battre contre lui quand vous apportez des modifications à la mise en page.</p>
<p>Avant d'approfondir les diverses méthodes de mise en page, revoir certaines choses déjà exposées dans les modules précédents à propos du cours normal d'affichage d'un document.</p>
<h2 id="Disposition_des_éléments_par_défaut">Disposition des éléments par défaut</h2>
<p>Tout d'abord, les boîtes des éléments pris isolément sont conditionnées en prenant le contenu des éléments, auquel, autour d'eux, est rapporté le remplissage, l'encadrement et la marge — conformément au modèle de boîte examiné plus tôt.</p>
<p>Par défaut, le contenu d'un élément de niveau bloc prend 100% de la largeur de son élément parent et sa hauteur est commandée par son contenu. Les éléments en ligne ont la hauteur et la largeur de leur contenu. Vous ne pouvez pas définir la largeur ou la hauteur d'éléments en ligne — ils se trouvent uniquement à l'intérieur d'un contenu d'élément de niveau bloc. 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 <code>display: bloc ;</code> (ou même <code>display: inline-block ;</code> qui mélange les caractéristiques des deux).</p>
<p>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 ? 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 niveau bloc sont disposés dans le sens où les blocs s'affichent dans le mode d'écriture du document — 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 donc, ou tout autre mode d'écriture horizontal, de haut en bas, les éléments de niveau bloc sont empilés verticalement.</p>
<p>Les éléments en ligne se comportent différemment — ils ne sont pas sur une nouvelle ligne ; ils se placent sur la même ligne qu'un autre élément inline ou que n'importe quel contenu textuel adjacent (ou entourant) tant qu'il y a de la place pour eux dans la largeur de l'élément parent de niveau de bloc. S'il n'y a pas suffisamment d'espace, le texte ou les éléments débordants se déplaceront sur une nouvelle ligne.</p>
<p>Si deux éléments adjacents ont tous deux une marge et que les deux marges se touchent, seule reste la plus grande des deux et la plus petite est englobée dans la plus grande — c'est ce qu'on appelle la fusion des marges ; nous l'avons déjà rencontrée plus haut.</p>
<p>Voici un exemple simple expliquant cela :</p>
<div id="Normal_Flow">
<pre class="brush: html"><h2>Cours d'un document de base</h2>
<p>Je suis un élément de niveau bloc de base.
Mes éléments de niveau bloc adjacents sont sur de
nouvelles lignes en dessous de moi.</p>
<p>Par défaut, nous occupons 100% de la largeur
de notre élément parent et nous sommes aussi hauts
que notre contenu enfant. Nos largeur et hauteur totales
sont égales à la largeur/hauteur de notre
contenu + remplissage + encadrement.</p>
<p>Nous sommes séparés de nos marges.
Comme il y a fusion des marges, nous sommes séparés
par la largeur de l'une de nos marges et non les deux.</p>
<p>Des éléments <code>inline</code> <span>comme celui-ci</span> ou
<span>celui‑là</span> sont placés sur la même ligne et
les nœuds de texte adjacents, s'il y a de la place sur
la même ligne. Les débordements des éléments inline
<span>sont placés sur une nouvelle ligne si possible
(comme celle‑ci contenant du texte)</span>, sinon ils
sont placés sur une nouvelle ligne, comme cette image :
<img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre>
<pre class="brush: css">body {
width: 500px;
margin: 0 auto;
}
p {
background: rgba(255,84,104,.3);
border: 2px solid rgb(255,84,104);
padding: 10px;
margin: 10px;
}
span {
background: white;
border: 1px solid black;
}</pre>
</div>
<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p>
<h2 id="Résumé">Résumé</h2>
<p>Maintenant que vous avez vu ce qu'est le cours normal de la mise en page et la façon dont le navigateur présente les choses par défaut, passons à la page suivante pour comprendre comment modifier cet affichage par défaut pour créer une mise en page conforme à votre design.</p>
<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
<h2 id="Dans_ce_module">Dans ce module</h2>
<ul>
<li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
<li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li>
<li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
<li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
<li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
<li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
<li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
<li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
<li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
<li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
</ul>
|
