LabEx
EntrerRejoindre

Réinitialisation de la mise en boîte (Box-Sizing) en CSS

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons explorer le concept de réinitialisation de la mise en boîte (Box-Sizing) en programmation CSS. Le laboratoire couvrira la manière de réinitialiser le modèle de boîte et d'empêcher la largeur (width) et la hauteur (height) d'un élément d'être affectées par la bordure (border) ou le rembourrage (padding). À la fin du laboratoire, vous aurez une compréhension approfondie de la propriété box-sizing et de la manière dont elle peut être utilisée pour améliorer la conception de vos pages web.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Réinitialisation de la mise en boîte (Box-Sizing)

index.html et style.css ont déjà été fournis dans la machine virtuelle (VM).

Pour vous assurer que la largeur (width) et la hauteur (height) d'un élément ne sont pas affectées par la bordure (border) ou le rembourrage (padding), utilisez la propriété CSS box-sizing: border-box. Cela inclut le rembourrage (padding) et la bordure (border) dans le calcul de la largeur (width) et de la hauteur (height) de l'élément. Si vous voulez hériter de la propriété box-sizing d'un élément parent, utilisez box-sizing: inherit.

Voici un exemple d'utilisation de la propriété box-sizing avec deux éléments div :

<div class="box">border-box</div>
<div class="box content-box">content-box</div>

*,
*::before,
*::after {
  box-sizing: inherit;
}

.box {
  display: inline-block;
  width: 120px;
  height: 120px;
  padding: 8px;
  margin: 8px;
  background: #f24333;
  color: white;
  border: 1px solid #ba1b1d;
  border-radius: 4px;
  box-sizing: border-box;
}

.content-box {
  box-sizing: content-box;
}

Dans cet exemple, le premier élément div a box-sizing: border-box, et le second élément div a box-sizing: content-box.

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire de réinitialisation de la mise en boîte (Box-Sizing). Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.