Le CSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour contrôler l’apparence des éléments sur une page web. Nous allons explorer deux concepts importants du CSS : la propriété box-sizing et les différentes unités de mesure. Comprendre ces concepts est essentiel pour créer des mises en page cohérentes et réactives.
Box-sizing
La propriété box-sizing permet de déterminer comment les dimensions d’une boîte (élément) sont calculées. Il existe deux valeurs courantes pour la propriété box-sizing :
1.1 Box-sizing: Border-box
Lorsque vous utilisez la valeur « border-box » pour la propriété box-sizing, les dimensions totales de l’élément comprennent les bordures et les paddings. Cela signifie que la largeur et la hauteur définies pour un élément incluront également ces éléments. Cela facilite le positionnement précis des éléments et évite les problèmes de débordement de contenu.
Exemple de code:
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid black;
}
1.2 Box-sizing: Content-box
La valeur par défaut de la propriété box-sizing est « content-box ». Dans ce cas, les dimensions définies pour un élément excluent les bordures et les paddings. Cela signifie que si vous définissez une largeur de 200px pour un élément avec une bordure et un padding, la largeur totale de l’élément sera supérieure à 200px, car les bordures et les paddings sont ajoutés à cette dimension.
Exemple de code:
.box {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 1px solid black;
}
Unités de mesure
Les unités de mesure en CSS permettent de spécifier les dimensions d’un élément. Voici les unités de mesure les plus couramment utilisées :
2.1 Pixels (px)
Le pixel (px) est une unité de mesure statique. Lorsque vous définissez une taille en pixels, elle reste fixe, quelle que soit la taille de l’écran ou du conteneur parent. Les pixels sont adaptés pour des éléments dont les dimensions doivent rester constantes.
Exemple de code:
.box {
width: 300px;
height: 150px;
}
2.2 Pourcentage (%)
Le pourcentage (%) est une unité de mesure relative par rapport au conteneur parent. En utilisant des pourcentages, vous pouvez créer des mises en page flexibles et adaptables à différentes tailles d’écran. Par exemple, si vous définissez une largeur de 50% pour un élément, il occupera la moitié de la largeur de son conteneur parent.
Exemple de code:
.box {
width: 50%;
height: 50%;
}
2.3 Em (em)
L’em (em) est une unité de mesure relative qui prend sa valeur par rapport à la taille de la police de l’élément parent. Cela signifie que si vous définissez la taille de la police de l’élément parent, les dimensions des éléments enfants en em seront calculées en fonction de cette taille de police. Les em sont utiles pour créer des mises en page fluides et scalables.
Exemple de code:
.box {
font-size: 16px;
padding: 1em;
}
2.4 Rem (rem)
Le rem (root em) est également une unité de mesure relative, mais il est basé sur la taille de la police de l’élément racine (habituellement l’élément <html>). Cela signifie que la taille définie en rem est indépendante de la taille de police des éléments parents. Les rem sont particulièrement utiles pour créer des designs réactifs et faciles à modifier.
Exemple de code:
html {
font-size: 16px;
}
.box {
padding: 2rem;
}
2.5 Viewport Height (vh) et Viewport Width (vw)
Les unités de mesure vh (Viewport Height) et vw (Viewport Width) sont relatives à la taille de la fenêtre du navigateur. Par exemple, 1vh équivaut à 1% de la hauteur de la fenêtre et 1vw équivaut à 1% de la largeur de la fenêtre. Ces unités sont particulièrement utiles pour créer des éléments qui occupent une proportion spécifique de l’écran.
Exemple de code:
.box {
width: 50vw;
height: 80vh;
}
Glossaire des unités de mesure
- px : Pixel
- % : Pourcentage
- em : Em
- rem : Rem
- vh : Viewport Height
- vw : Viewport Width
Conclusion
La propriété box-sizing et les différentes unités de mesure en CSS sont des éléments essentiels pour créer des mises en page web flexibles et réactives. Comprendre comment utiliser box-sizing avec les valeurs « border-box » et « content-box » peut grandement faciliter la gestion des dimensions des éléments. De plus, en utilisant les bonnes unités de mesure, vous pouvez créer des designs adaptatifs et fluides. Expérimentez avec ces concepts dans vos propres projets pour obtenir des résultats visuels précis et cohérents.
Lien du MDN : Site officiel
Autres articles
Apprentissage développement Web : Les Avantages Incontournables de SoloLearn
Apprentissage développement web : Introduction SoloLearn est bien plus qu'une simple plateforme d'apprentissage en ligne. C'est une ressource précieuse pour tous ceux qui souhaitent se lancer dans le développement web. Dans cet article, nous explorerons les avantages...
Devenez un Expert de React : Le Guide Complet pour Passer du JavaScript à React
Partie 1 : Introduction de Javascript à React React est l'une des bibliothèques JavaScript les plus populaires et puissantes pour le développement web. Si vous avez déjà une solide compréhension de JavaScript, vous êtes sur la bonne voie pour maîtriser React. Dans...
Bibliothèques et modules Python populaires : Numpy, Pandas, et Matplotlib
1. Introduction à Numpy, Pandas et Matplotlib en Python Lorsqu'il s'agit de travailler avec des données et de créer des visualisations percutantes en Python, trois bibliothèques se démarquent : Numpy, Pandas et Matplotlib. Ces outils sont des incontournables pour les...
0 commentaires