La propriété d’affichage CSS est un outil puissant pour les concepteurs de sites Web. Il vous permet de contrôler la disposition des éléments du site Web avec un style minimal, avec des valeurs simples faciles à mémoriser.
Mais que fait chacune de ces valeurs et comment fonctionnent-elles ? Découvrons-le.
Qu’est-ce que la propriété d’affichage CSS ?
La propriété display spécifie le type de rendu de boîte utilisé pour les éléments HTML sur une page Web. Cela se traduit par une variété de comportements, y compris ne pas se présenter du tout. Vous pouvez modifier ces valeurs sur votre site Web via la feuille de style ou les sections de personnalisation CSS appropriées dans Outils CMS comme WordPress.
Conserver les éléments alignés avec l’affichage CSS : inline
Les valeurs de largeur et de hauteur ne s’appliquent pas à un élément avec affichage en ligne ; le contenu à l’intérieur définit ses dimensions. Les éléments HTML intégrés peuvent être placés côte à côte avec d’autres éléments, se comportant comme un . L’affichage en ligne est le plus souvent utilisé pour le texte.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
background-color: yellow;
padding: 10px 0px 10px 10px;
}
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</div>
</body>
</html>
Ce balisage HTML et le CSS ci-dessus constituent un bon exemple de la valeur d’affichage en ligne. Lorsqu’ils sont utilisés ensemble, cela affichera une seule ligne de texte composée de deux éléments HTML différents.
Contrôler les mises en page du site Web avec l’affichage CSS : bloquer
À certains égards, la valeur du bloc d’affichage est l’opposé de la valeur en ligne. Les dimensions de hauteur et de largeur peuvent être définies et les éléments avec cette valeur ne peuvent pas être placés les uns à côté des autres. L’exemple ci-dessus montre deux éléments avec la valeur de bloc. Les éléments avec la valeur d’affichage de bloc ont par défaut la largeur maximale de leur élément parent.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
background-color: yellow;
padding: 10px 10px 10px 10px;
}
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</div>
</body>
</html>Contrairement à l’exemple de style en ligne, cet exemple de valeur de bloc d’affichage divise les lignes de texte en deux lignes différentes. La valeur fit-content width définit la largeur des éléments pour qu’elle corresponde à la longueur du texte.
Éléments HTML côte à côte avec affichage CSS : bloc en ligne
La valeur de bloc en ligne d’affichage CSS fonctionne comme une valeur en ligne normale, uniquement avec la possibilité d’ajouter des dimensions spécifiques. Cela permet de créer des mises en page de type grille sans avoir d’éléments parents en place. Pour revenir à l’exemple précédent, l’ajout de la valeur inline-block permet aux éléments de s’asseoir les uns à côté des autres.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
background-color: yellow;
padding: 10px 10px 10px 10px;
}
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</div>
</body>
</html>
La valeur inline-block n’apparaît pas très différente de la valeur inline. Il est important de noter que vous pouvez définir les dimensions des éléments avec cette valeur, ce qui facilite le travail dans certains cas.
Masquer les éléments du site Web avec l’affichage CSS : aucun
La valeur d’affichage la plus simple est “aucun”. Cette valeur masque l’élément et tous les éléments enfants, ainsi que les marges et autres propriétés d’espacement. Les éléments avec la valeur CSS display none sont toujours visibles dans les inspecteurs du navigateur.
Créez des éléments flexibles et réactifs avec l’affichage CSS : flex
Display flex est l’un des modes de mise en page CSS les plus récents. Lorsque display flex est sur un élément parent, tous les éléments qu’il contient deviennent des éléments CSS flexibles. L’élément parent de cette configuration est une boîte flexible.
Les boîtes flexibles créent des conceptions réactives avec des variables prédéfinies, telles que la largeur et la hauteur. Il vaut la peine en savoir plus sur les boîtes flexibles HTML/CSS avant de commencer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
background-color: yellow;
width: 40%;
height: 100px;
}
background-color: lightgreen;
width: 25%;
height: 100px;
}
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html> Positionner les Flexbox côte à côte Avec affichage : inline-flex
Inline-flex se comporte comme une boîte flexible ordinaire, avec l’avantage supplémentaire que l’élément peut s’asseoir à côté d’autres éléments.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
background-color: yellow;
width: 40%;
height: 100px;
}
background-color: lightgreen;
width: 25%;
height: 100px;
}
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>Créer des tableaux complexes avec affichage CSS : table
La valeur du tableau d’affichage rappelle les anciens jours de la conception de sites Web. Bien que la plupart des sites Web n’utilisent pas de tableaux pour leurs mises en page aujourd’hui, ils sont toujours valables pour afficher les données et le contenu dans un format lisible.
L’ajout de la valeur de tableau à un élément HTML le fera agir comme un élément de tableau, mais vous avez besoin de valeurs supplémentaires pour que votre tableau fonctionne correctement.
Affichage CSS : tableau-cellule
Les éléments avec la valeur table-cell agissent comme des cellules individuelles dans le tableau principal. Et les valeurs de colonne de table et de ligne de table regroupent ces cellules individuelles.
Affichage CSS : tableau-ligne
La valeur table-row fonctionne exactement comme un élément HTML
. En tant que parent d’éléments avec la valeur table-cell, il divisera votre tableau en lignes horizontales.Affichage CSS : table-colonne
La valeur table-column fonctionne de la même manière que la valeur table-row, sauf qu’elle ne divise pas votre table. Au lieu de cela, vous pouvez utiliser cette valeur pour ajouter des règles CSS spécifiques aux différentes colonnes qui existent déjà.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
display: table-column-group;
background-color: yellow;
}
display: table-column-group;
background-color: lightgreen;
}
display: table-column-group;
background-color: lightblue;
}
display: table-row;
}
display: table-row;
}
display: table-row;
}
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</div>
</div>
</div>
</body>
</html>Créer des tableaux côte à côte avec affichage CSS : inline-table
Comme les autres variantes en ligne que nous avons déjà examinées, inline-table permet de placer des éléments de table à côté d’autres éléments.
Construire des mises en page de sites Web réactifs avec affichage CSS : grille
La valeur de la grille d’affichage CSS est similaire à la valeur du tableau, seules les colonnes et les lignes d’une grille peuvent avoir un dimensionnement flexible. Cela rend les grilles idéales pour créer la mise en page principale des pages Web. Ils laissent de la place pour les en-têtes et pieds de page pleine largeur tout en permettant d’avoir des zones de contenu de différentes tailles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</div>
</div>
</body>
</html>
Les grilles sont similaires aux boîtes flexibles, sauf qu’elles peuvent placer des éléments en dessous et à côté les uns des autres. La propriété grid-template-areas est vitale pour cela. Comme vous pouvez le voir dans le code, notre en-tête et notre pied de page occupent quatre espaces dans le tableau, car ils sont en pleine largeur. Les barres latérales occupent chacune un emplacement, tandis que le contenu en prend deux, divisant ainsi la rangée du milieu de la grille en trois colonnes.
Affichage CSS : grille en ligne
L’utilisation de la valeur inline-grid permettra à votre grille de s’asseoir à côté d’autres éléments, tout comme les autres valeurs inline de ce guide.
Utilisation de l’affichage CSS pour la conception Web
La propriété d’affichage CSS offre un moyen pratique d’ajuster les structures des éléments du site Web sans avoir à modifier le balisage HTML. C’est idéal pour ceux qui utilisent des plates-formes de diffusion de contenu comme Shopify ou WordPress, mais cela peut également être pratique pour la conception Web générale.
— to www.makeuseof.com
Jeu de briques
Snake
Pacman
Bubble