033.4 Leçon 1
Certification : |
Web Development Essentials |
---|---|
Version : |
1.0 |
Thème : |
033 Styliser le contenu avec CSS |
Objectif : |
033.4 Modèle de boîte CSS et mise en page |
Leçon : |
1 sur 1 |
Introduction
Chaque élément visible d’un document HTML est affiché sous la forme d’une boîte rectangulaire. Ainsi, le terme modèle de boîte (box model) décrit l’approche adoptée par CSS pour modifier les propriétés visuelles des éléments. Comme des boîtes de différentes tailles, les éléments HTML peuvent être imbriqués à l’intérieur d’éléments conteneurs (container) — généralement l’élément div
— afin d’être séparés en sections.
Nous pouvons utiliser le CSS pour modifier la position des boîtes, qu’il s’agisse d’ajustements mineurs ou de changements radicaux dans la disposition des éléments de la page. Outre le flux normal, la position de chaque boîte peut être basée sur les éléments qui l’entourent, soit sa relation avec son conteneur parent, soit sa relation avec fenêtre d’affichage (viewport), qui est la zone de la page visible par l’utilisateur. Aucun mécanisme ne répond à toutes les exigences possibles en matière de mise en page ; vous pouvez donc avoir besoin d’une combinaison de ces mécanismes.
Flux normal
La façon dont le navigateur affiche par défaut l’arborescence du document est appelée flux normal (normal flow). Les rectangles correspondant aux éléments sont placés plus ou moins dans le même ordre qu’ils apparaissent dans l’arbre du document, par rapport à leurs éléments parents. Néanmoins, selon le type d’élément, le rectangle correspondant peut suivre des règles de positionnement distinctes.
Une bonne méthode pour comprendre la logique du flux normal est de rendre les boîtes visibles. Nous pouvons commencer avec une page très basique, ayant seulement trois éléments div
séparés, chacun ayant un paragraphe avec du texte aléatoire :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Box Model and Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="first">
<h2>First div</h2>
<p><span>Sed</span> <span>eget</span> <span>velit</span>
<span>id</span> <span>ante</span> <span>tempus</span>
<span>porta</span> <span>pulvinar</span> <span>et</span>
<span>ex.</span></p>
</div><!-- #first -->
<div id="second">
<h2>Second div</h2>
<p><span>Fusce</span> <span>vitae</span> <span>vehicula</span>
<span>neque.</span> <span>Etiam</span> <span>maximus</span>
<span>vulputate</span> <span>neque</span> <span>eu</span>
<span>lobortis.</span> <span>Phasellus</span> <span>condimentum,</span>
<span>felis</span> <span>eget</span> <span>eleifend</span>
<span>aliquam,</span> <span>dui</span> <span>dolor</span>
<span>bibendum</span> <span>leo.</span></p>
</div><!-- #second -->
<div id="third">
<h2>Third div</h2>
<p><span>Pellentesque</span> <span>ornare</span> <span>ultricies</span>
<span>elementum.</span> <span>Morbi</span> <span>vulputate</span>
<span>pretium</span> <span>arcu,</span> <span>sed</span>
<span>faucibus.</span></p>
</div><!-- #third -->
</body>
</html>
Chaque mot se trouve dans un élément span
, nous pouvons donc donner un style aux mots et voir comment ils sont traités comme des boîtes. Pour rendre les boîtes visibles, nous devons modifier le fichier de feuille de style style.css
référencé par le document HTML. Les règles suivantes feront ce dont nous avons besoin :
* {
font-family: sans;
font-size: 14pt;
}
div {
border: 2px solid #00000044;
}
#first {
background-color: #c4a000ff;
}
#second {
background-color: #4e9a06ff;
}
#third {
background-color: #5c3566da;
}
h2 {
background-color: #ffffff66;
}
p {
background-color: #ffffff66;
}
span {
background-color: #ffffffaa;
}
Le résultat apparaît dans la Figure 1.
La Figure 1 montre que chaque balise HTML a une case correspondante dans la mise en page. Les éléments div
, h2
et p
s’étendent à la largeur de leur élément parent. Par exemple, l’élément parent des éléments div
est l’élément body
, ils s’étendent donc sur la largeur du corps body
, tandis que le parent de chaque élément h2
et p
est l’élément div
correspondant. Les boîtes qui s’étendent sur la largeur de leur élément parent sont appelées des éléments de bloc. Parmi les balises HTML les plus courantes rendues sous forme de blocs figurent les éléments h1
, h2
, h3
, p
, ul
, ol
, table
, li
, div
, section
, form
et aside
. Les éléments de bloc frères — éléments de bloc partageant le même élément parent immédiat — sont empilés dans leur parent de haut en bas.
Note
|
Certains éléments de bloc ne sont pas destinés à être utilisés comme conteneurs pour d’autres éléments de bloc. Il est possible, par exemple, d’insérer un élément de bloc à l’intérieur d’un élément |
Mis à part le texte lui-même, des éléments tels que h1
, p
et li
n’attendent que des éléments en ligne (inline) comme enfants. Comme la plupart des scripts occidentaux, les éléments en ligne suivent le flux de gauche à droite du texte. Lorsqu’il ne reste plus de place dans la partie droite, le flux des éléments en ligne continue sur la ligne suivante, tout comme le texte. Certaines balises HTML courantes traitées comme des éléments en ligne sont span
, a
, em
, strong
, img
, input
, et label
.
Dans notre exemple de page HTML, chaque mot à l’intérieur des paragraphes était entouré d’une balise span
, afin qu’ils puissent être mis en évidence avec une règle CSS correspondante. Comme le montre l’image, chaque élément span
est placé horizontalement, de gauche à droite, jusqu’à ce qu’il n’y ait plus de place dans l’élément parent.
La hauteur de l’élément dépend de son contenu, de sorte que le navigateur ajuste la hauteur d’un élément conteneur pour s’adapter à ses éléments de bloc imbriqués ou à ses lignes d’éléments en ligne. Cependant, certaines propriétés CSS affectent la forme d’une boîte, sa position et le placement de ses éléments internes.
Les propriétés margin
et padding
affectent tous les types de boîtes. Si vous ne définissez pas ces propriétés explicitement, le navigateur en définit certaines en utilisant des valeurs standard. Comme on le voit dans la Figure 1, les éléments h2
et p
ont été affichés avec un espace entre eux. Ces écarts sont les marges supérieure et inférieure que le navigateur ajoute par défaut à ces éléments. Nous pouvons les supprimer en modifiant les règles CSS pour les sélecteurs h2
et p
:
h2 {
background-color: #ffffff66;
margin: 0;
}
p {
background-color: #ffffff66;
margin: 0;
}
Le résultat apparaît dans la Figure 2.
margin
permet de modifier ou de supprimer les marges des éléments.L’élément body
a aussi, par défaut, une petite marge qui crée un espace tout autour. Cet espace peut également être supprimé à l’aide de la propriété margin
.
Alors que la propriété margin
définit l’écart entre l’élément et son environnement, la propriété padding
de l’élément définit l’écart interne entre les limites du conteneur et ses éléments enfants. Prenons par exemple les éléments h2
et p
à l’intérieur de chaque div
dans notre exemple de code. Nous pourrions utiliser leur propriété margin
pour créer un écart par rapport aux limites de la div
correspondante, mais il est plus simple de modifier la propriété padding
du conteneur :
#second {
background-color: #4e9a06ff;
padding: 1em;
}
Seule la règle pour le deuxième div
a été modifiée, de sorte que les résultats (Figure 3) montrent la différence entre le deuxième div
et les autres conteneurs div
.
div
différents peuvent avoir des padding
différents.La propriété margin
est un raccourci pour quatre propriétés contrôlant les quatre côtés de la boîte : margin-top
, margin-right
, margin-bottom
, et margin-left
. Lorsque l’on attribue une seule valeur à margin
, comme dans les exemples précédents, les quatre marges de la boîte l’utilisent. Lorsque deux valeurs sont inscrites, la première définit les marges supérieure et inférieure, tandis que la seconde définit les marges droite et gauche. En utilisant margin: 1em 2em
, par exemple, on définit un espace de 1 em
pour les marges supérieure et inférieure et un espace de 2 em
pour les marges droite et gauche. L’écriture de quatre valeurs définit les marges des quatre côtés dans le sens des aiguilles d’une montre, en commençant par le haut. Les différentes valeurs de la propriété raccourcie ne sont pas tenues d’utiliser les mêmes unités.
La propriété padding
est également un raccourci, suivant les mêmes principes que la propriété margin
.
Dans leur comportement par défaut, les éléments de bloc s’étirent pour s’adapter à la largeur disponible. Mais ce n’est pas obligatoire. La propriété width
permet de définir une taille horizontale fixe pour le bloc :
#first {
background-color: #c4a000ff;
width: 6em;
}
L’ajout de width: 6em
à la règle CSS rétrécit le premier div
horizontalement, laissant un espace vide sur son côté droit (Figure 4).
width
modifie la largeur horizontale du premier div
.Au lieu de laisser le premier div
aligné sur la gauche, nous pouvons souhaiter le centrer. Centrer une boîte revient à définir des marges de même taille des deux côtés, nous pouvons donc utiliser la propriété margin
pour la centrer. La taille de l’espace disponible pouvant varier, nous utilisons la valeur auto
pour les marges gauche et droite :
#first {
background-color: #c4a000ff;
width: 6em;
margin: 0 auto;
}
Les marges gauche et droite sont automatiquement calculées par le navigateur et la boîte sera centrée (Figure 5).
margin
est utilisée pour centrer le premier div
.Comme vous pouvez le constater, le fait de rendre un élément de bloc plus étroit ne rend pas l’espace restant disponible pour l’élément suivant. Le flux normal est toujours préservé, comme si l’élément plus étroit occupait toujours toute la largeur disponible.
Personnalisation du flux normal
Le flux normal est simple et séquentiel. CSS vous permet également de rompre le flux normal et de positionner les éléments de manière très spécifique, voire même d’ignorer le défilement de la page si vous le souhaitez. Nous allons examiner dans cette section plusieurs façons de contrôler le positionnement des éléments.
Éléments flottants
Il est possible de faire en sorte que des éléments de bloc frères partagent le même espace horizontal. L’un des moyens d’y parvenir est d’utiliser la propriété float
, qui retire l’élément du flux normal. Comme son nom l’indique, la propriété float
fait flotter la boîte au-dessus des éléments de bloc qui suivent, de sorte qu’ils seront affichés comme s’ils étaient sous la boîte flottante. Pour faire flotter le premier div
vers la droite, ajoutez float: right
à la règle CSS correspondante :
#first {
background-color: #c4a000ff;
width: 6em;
float: right;
}
Les marges automatiques sont ignorées dans une boîte flottante, donc la propriété margin
peut être supprimée. La Figure 6 montre le résultat obtenu en faisant flotter le premier div
vers la droite.
div
est flottant et ne fait pas partie du flux normal.Par défaut, tous les éléments de bloc venant après l’élément flottant passeront sous celui-ci. Par conséquent, si la hauteur est suffisante, la boîte flottante couvrira tous les éléments de bloc restants.
Bien qu’un élément flottant se place au-dessus des autres éléments du bloc, le contenu en ligne à l’intérieur du conteneur de l’élément flottant s’enroule autour de l’élément flottant. Ce principe s’inspire de la mise en page des magazines et des journaux, qui enroulent souvent le texte autour d’une image, par exemple.
L’image précédente montre comment le premier div
couvre le deuxième div
et une partie du troisième div
. Supposons que nous voulions que le premier div
flotte au-dessus du deuxième div
, mais pas du troisième. La solution consiste à inclure la propriété clear
dans la règle CSS correspondant au troisième div
:
#third {
background-color: #5c3566da;
clear: right;
}
En définissant la propriété clear
à right
, l’élément correspondant saute tous les éléments flottant à droite précédents, reprenant le flux normal (Figure 7).
clear
retourne au flux normal.De même, si un élément précédent flottait sur la gauche, vous pouvez utiliser clear: left
pour reprendre le flux normal. Si vous devez ignorer des éléments flottants à gauche et à droite, utilisez clear: both
.
Positionnement des boîtes
Dans un flux normal, chaque boîte va après les boîtes qui la précèdent dans l’arbre du document. Les éléments frères précédents "poussent" (“push”) les éléments qui les suivent, les déplaçant vers la droite et vers le bas à l’intérieur de leur élément parent. L’élément parent peut avoir ses propres frères qui lui font la même chose. C’est comme placer des tuiles côte à côte dans un mur, en commençant par le haut.
Cette méthode de positionnement des boîtes est appelée statique et constitue la valeur par défaut de la propriété CSS position
. En dehors de la définition des marges et du remplissage, il n’existe aucun moyen de repositionner une boîte statique dans la page.
Comme pour l’analogie des tuiles dans le mur, le placement statique n’est pas obligatoire. Comme pour les tuiles, vous pouvez placer les boîtes où vous voulez, même en couvrant d’autres boîtes. Pour ce faire, attribuez à la propriété position
l’une des valeurs suivantes :
relative
-
L’élément suit le flux normal du document, mais il peut utiliser les propriétés
top
,right
,bottom
etleft
pour définir des décalages par rapport à sa position statique initiale. Ces décalages peuvent également être négatifs. Les autres éléments restent à leur place initiale, comme si l’élément relatif était toujours statique. absolute
-
L’élément ignore le flux normal des autres éléments et se positionne sur la page grâce aux propriétés
top
,right
,bottom
, etleft
. Leurs valeurs sont relatives au corps du document ou à un conteneur parent non statique. fixed
-
L’élément ignore le flux normal des autres éléments et se positionne grâce aux propriétés
top
,right
,bottom
etleft
. Leurs valeurs sont relatives à la fenêtre d’affichage (c’est-à-dire la zone de l’écran où le document est affiché). Les éléments fixes ne se déplacent pas lorsque le visiteur fait défiler le document, mais ressemblent à un autocollant fixé à l’écran. sticky
-
L’élément suit le flux normal du document. Cependant, au lieu de sortir de la fenêtre d’affichage lorsque le document défile, il s’arrête à la position définie par les propriétés
top
,right
,bottom
etleft
. Si la valeurtop
est10px
, par exemple, l’élément arrêtera de défiler sous la partie supérieure de la fenêtre lorsqu’il atteindra 10 pixels de la limite supérieure de la fenêtre. Lorsque cela se produit, le reste de la page continue de défiler, mais l’élément collant se comporte comme un élément fixe dans cette position. Il reprendra sa position initiale lorsque le document défilera de nouveau jusqu’à sa position dans la fenêtre d’affichage. Les éléments collants sont couramment utilisés de nos jours pour créer des menus supérieurs qui restent toujours visibles.
Les positions qui peuvent utiliser les propriétés top
, right
, bottom
et left
ne sont pas obligées de les utiliser toutes. Si vous définissez à la fois les propriétés top
et height
d’un élément absolu, par exemple, le navigateur calcule implicitement sa propriété bottom
(top
+ height
= bottom
).
Propriétés display
Si l’ordre donné par le flux normal n’est pas un problème dans votre conception, mais que vous voulez changer la façon dont les boîtes s’alignent dans la page, modifiez la propriété display
de l’élément. La propriété display
peut même faire disparaître complètement l’élément du document rendu, en définissant display: none
. Ceci peut être utile lorsque vous souhaitez afficher l’élément plus tard en utilisant JavaScript.
La propriété display
peut aussi, par exemple, faire en sorte qu’un élément en bloc se comporte comme un élément en ligne (display: inline
). Ce n’est toutefois pas une bonne pratique. Il existe de meilleures méthodes pour placer les éléments conteneurs côte à côte, comme le modèle de boîte flexible (flexbox model).
Le modèle de boîte flexible a été inventé pour surmonter les limites des éléments flottants et pour éliminer l’utilisation inappropriée des tableaux pour structurer la mise en page. Lorsque vous définissez la propriété display
d’un élément conteneur sur flex
pour le transformer en conteneur flexbox, ses enfants immédiats se comporteront plus ou moins comme les cellules d’une rangée de tableau.
Tip
|
Si vous voulez encore mieux contrôler le placement des éléments sur la page, jetez un coup d’œil à la fonctionnalité de grille CSS grid. La grille est un système puissant basé sur des lignes et des colonnes permettant de créer des mises en page élaborées. |
Pour tester l’affichage flexible, ajoutez un nouvel élément div
à la page d’exemple et faites-en le conteneur des trois éléments div
existants :
<div id="container">
<div id="first">
<h2>First div</h2>
<p><span>Sed</span> <span>eget</span> <span>velit</span>
<span>id</span> <span>ante</span> <span>tempus</span>
<span>porta</span> <span>pulvinar</span> <span>et</span>
<span>ex.</span></p>
</div><!-- #first -->
<div id="second">
<h2>Second div</h2>
<p><span>Fusce</span> <span>vitae</span> <span>vehicula</span>
<span>neque.</span> <span>Etiam</span> <span>maximus</span>
<span>vulputate</span> <span>neque</span> <span>eu</span>
<span>lobortis.</span> <span>Phasellus</span> <span>condimentum,</span>
<span>felis</span> <span>eget</span> <span>eleifend</span>
<span>aliquam,</span> <span>dui</span> <span>dolor</span>
<span>bibendum</span> <span>leo.</span></p>
</div><!-- #second -->
<div id="third">
<h2>Third div</h2>
<p><span>Pellentesque</span> <span>ornare</span> <span>ultricies</span>
<span>elementum.</span> <span>Morbi</span> <span>vulputate</span>
<span>pretium</span> <span>arcu,</span> <span>sed</span>
<span>faucibus.</span></p>
</div><!-- #third -->
</div><!-- #container -->
Ajoutez la règle CSS suivante à la feuille de style pour transformer le conteneur div
en conteneur flexible flexbox :
#container {
display: flex;
}
Le résultat est un affichage côte à côte des trois éléments internes div
(Figure 8).
L’utilisation de la valeur inline-flex
au lieu de flex
a fondamentalement le même résultat, mais fait que les enfants se comportent plus comme des éléments en ligne.
Conception réactive
Nous savons que le CSS fournit des propriétés qui permettent d’ajuster les tailles des éléments et des polices par rapport à la surface d’écran disponible. Cependant, vous pouvez aller plus loin et utiliser un design différent selon les appareils : par exemple, les systèmes de bureau par rapport aux appareils dont les dimensions de l’écran sont inférieures à une certaine taille. Cette approche est appelée conception web réactive (responsive web design), et CSS fournit des méthodes appelées requêtes média pour la rendre possible.
Dans l’exemple précédent, nous avons modifié la mise en page pour placer les éléments div
côte à côte dans des colonnes. Cette mise en page convient aux grands écrans, mais elle sera trop encombrante sur les petits écrans. Pour résoudre ce problème, nous pouvons ajouter une requête média à la feuille de style qui ne correspond qu’aux écrans d’une largeur d’au moins 600px
:
@media (min-width: 600px){
#container {
display: flex;
}
}
Les règles CSS contenues dans la directive @media
ne seront utilisées que si le critère entre parenthèses est satisfait. Dans cet exemple, si la largeur de la fenêtre d’affichage est inférieure à 600px, la règle ne sera pas appliquée au conteneur div
et ses enfants seront rendus comme des éléments div
classiques. Le navigateur réévalue les requêtes média chaque fois que la dimension de la fenêtre d’affichage change, de sorte que la mise en page peut être modifiée en temps réel lors du redimensionnement de la fenêtre du navigateur ou de la rotation du smartphone.
Exercices guidés
-
Si la propriété
position
n’est pas modifiée, quelle méthode de positionnement sera utilisée par le navigateur ? -
Comment s’assurer que la boîte d’un élément sera affichée après les éléments flottants précédents ?
-
Comment utiliser la propriété raccourcie
margin
pour définir les marges supérieure et inférieure à4px
et les marges droite et gauche à6em
? -
Comment centrer horizontalement un élément conteneur statique à largeur fixe sur la page ?
Exercices d’exploration
-
Écrire une règle CSS correspondant à l’élément
<div class="picture">
pour que le texte à l’intérieur de ses éléments de bloc suivants se dépose vers son côté droit. -
Comment la propriété
top
affecte-t-elle un élément statique par rapport à son élément parent ? -
Comment le fait de changer la propriété
display
d’un élément enflex
affecte-t-il son placement dans le flux normal ? -
Quelle fonctionnalité CSS vous permet d’utiliser un ensemble de règles distinct en fonction des dimensions de l’écran ?
Résumé
Cette leçon traite du modèle de boîte CSS et de la façon dont nous pouvons le personnaliser. En plus du flux normal du document, le concepteur peut utiliser différents mécanismes de positionnement pour mettre en œuvre une mise en page personnalisée. La leçon aborde les concepts et procédures suivants :
-
Le flux normal du document.
-
Ajustements de la marge et du padding de la boîte d’un élément.
-
Utilisation des propriétés
float
etclear
. -
Les mécanismes de positionnement : statique, relatif, absolu, fixe et collant.
-
Valeurs alternatives pour la propriété
display
. -
Les bases du design réactif.
Réponses aux exercices guidés
-
Si la propriété
position
n’est pas modifiée, quelle méthode de positionnement sera utilisée par le navigateur ?La méthode
static
. -
Comment s’assurer que la boîte d’un élément sera affichée après les éléments flottants précédents ?
La propriété
clear
de l’élément doit être définie àboth
. -
Comment utiliser la propriété raccourcie
margin
pour définir les marges supérieure et inférieure à4px
et les marges droite et gauche à6em
?Elle peut être soit
margin: 4px 6em
oumargin: 4px 6em 4px 6em
. -
Comment centrer horizontalement un élément conteneur statique à largeur fixe sur la page ?
En utilisant la valeur
auto
dans ses propriétésmargin-left
etmargin-right
.
Réponses aux exercices d’exploration
-
Écrire une règle CSS correspondant à l’élément
<div class="picture">
pour que le texte à l’intérieur de ses éléments de bloc suivants se dépose vers son côté droit..picture { float: left; }
-
Comment la propriété
top
affecte-t-elle un élément statique par rapport à son élément parent ?La propriété
top
ne s’applique pas aux éléments statiques. -
Comment le fait de changer la propriété
display
d’un élément enflex
affecte-t-il son placement dans le flux normal ?Le placement de l’élément lui-même ne change pas, mais ses éléments enfants immédiats seront affichés côte à côte horizontalement.
-
Quelle fonctionnalité CSS vous permet d’utiliser un ensemble de règles distinct en fonction des dimensions de l’écran ?
Les requêtes média permettent au navigateur de vérifier les dimensions de la fenêtre d’affichage avant d’appliquer une règle CSS.