CSS - Boîte d'emballage

Salut à toi, aspirant(e)s développeur(euse)s web ! Aujourd'hui, nous allons plonger dans le monde fascinant du dimensionnement des boîtes en CSS. En tant que votre professeur d'informatique du coin, je suis là pour vous guider à travers ce concept essentiel qui rendra votre vie tellement plus facile lors de la conception de mises en page web. Faites-moi confiance, une fois que vous maîtriserez cela, vous vous demanderez comment vous avez vécu sans !

Propriété CSS Box-Sizing

Commençons par les bases. La propriété CSS box-sizing est comme une baguette magique qui détermine comment la largeur et la hauteur totales d'un élément sont calculées. C'est un véritable changement de jeu dans la conception web, et je suis excité de vous montrer pourquoi !

Dans le modèle de boîte traditionnel de CSS, lorsque vous définissez une largeur et une hauteur pour un élément, l'espace qu'il occupe peut être plus grand en raison du padding et des bordures. Cela peut conduire à des problèmes de mise en page imprévus, un peu comme essayer de faire rentrer une grande boîte dans un petit placard - ça ne marche tout simplement pas !

C'est là que box-sizing intervient pour nous sauver. Il nous permet de contrôler comment le navigateur calcule la taille totale d'un élément.

Valeurs Possibles

La propriété box-sizing peut prendre trois valeurs possibles. Voici un aperçu :

Valeur	Description
content-box	Cette est la valeur par défaut. La largeur et la hauteur s'appliquent uniquement au contenu de l'élément.
border-box	La largeur et la hauteur incluent le contenu, le padding et la bordure.
inherit	L'élément hérite de la valeur box-sizing de son élément parent.

Voyons maintenant ces valeurs en action avec quelques exemples !

Content-Box (Valeur par défaut)

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
box-sizing: content-box;
}

Dans cet exemple, la largeur totale de l'élément sera de 250px (200px + 20px de padding de chaque côté + 5px de bordure de chaque côté), et la hauteur totale sera de 150px. C'est comme commander une petite pizza et se retrouver avec une grande - inattendu, n'est-ce pas ?

Border-Box

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
box-sizing: border-box;
}

Maintenant, avec border-box, la largeur et la hauteur totales seront exactement de 200px et 100px respectivement. Le padding et la bordure sont inclus dans ces dimensions. C'est comme commander une pizza et obtenir exactement ce que vous avez demandé - sans surprises !

Applications

La propriété box-sizing s'applique à tous les éléments qui acceptent une largeur ou une hauteur. Cela inclut :

• Les éléments de niveau bloc (comme <div>, <p>, <h1>, etc.)
• Les éléments inline-block
• Les cellules de tableau et les éléments table-caption

Il est important de noter qu'elle ne s'applique pas aux éléments inline sauf si vous changez leur propriété display.

Syntaxe DOM

En JavaScript, vous pouvez accéder et modifier la propriété box-sizing en utilisant le DOM. Voici comment :

// Obtenir la valeur de box-sizing
let boxSizing = element.style.boxSizing;

// Définir la valeur de box-sizing
element.style.boxSizing = 'border-box';

Exemple

Mettons tout cela en pratique avec un exemple pratique. Imaginons que nous créons une mise en page simple avec deux colonnes côte à côte.

<div class="container">
<div class="column">Colonne 1</div>
<div class="column">Colonne 2</div>
</div>

.container {
width: 100%;
}

.column {
width: 50%;
padding: 20px;
float: left;
box-sizing: border-box;
}

Dans cet exemple, nous définissons la largeur de chaque colonne à 50% et ajoutons du padding. En utilisant box-sizing: border-box, nous nous assurons que les colonnes s'adapteront parfaitement côte à côte, même avec le padding ajouté. Sans cela, les colonnes déborderaient de leur conteneur !

Voici un résumé :

1. Nous définissons le conteneur à 100% de largeur pour qu'il occupe la pleine largeur de son parent.
2. Chaque colonne est définie à 50% de largeur, donc elles devraient se situer côte à côte.
3. Nous ajoutons 20px de padding à chaque colonne pour un peu d'espace.
4. En utilisant box-sizing: border-box, le padding est inclus dans les 50% de largeur, évitant le débordement.

Ceci n'est que la pointe de l'iceberg en ce qui concerne le pouvoir de box-sizing. Au fur et à mesure de votre parcours de développement web, vous trouverez d'innombrables situations où cette propriété sauve la mise.

Souvenez-vous, la conception web est avant tout une question de créer des layouts harmonieux, et box-sizing est votre arme secrète pour atteindre cette harmonie. C'est comme avoir un placard bien organisé - tout rentre parfaitement, et il n'y a pas de surprises désagréables !

Au fil des ans, j'ai vu d'innombrables moments de révélation lorsque les élèves saisissent le concept de box-sizing. C'est ce moment magique où les layouts soudainement ont un sens, et la frustration des débordements imprévus s'évapore.

Alors, continuez à pratiquer, expérimentez avec différents layouts, et n'ayez pas peur de jouer avec box-sizing. Avant de vous en rendre compte, vous serez capable de créer des designs pixel-parfait avec aisance !

Bonne programmation, futurs magiciens du web !

Credits: Image by storyset