Table des matières
Le modèle de boîte en CSS décrit les boîtes générées à partir d'éléments HTML. Le modèle de boîte contient également des options détaillées pour définir les marges, les bordures, le remplissage et le contenu de chaque élément. L'image suivante montre comment le modèle de boîte est construit.Le modèle de boîte ou « modèle de boîte » est sûrement la caractéristique la plus importante du langage de feuille de style CSS, puisqu'il conditionne la conception de toutes les pages Web. Le modèle de boîte est le comportement de CSS qui fait que tous les éléments des pages sont représentés par des boîtes rectangulaires.
Les boîtes d'une page sont créées automatiquement. Chaque fois qu'une balise HTML est insérée, une nouvelle boîte rectangulaire est créée qui entoure le contenu de cet élément. L'image suivante montre les trois zones rectangulaires qui créent les trois balises HTML incluses dans la page.
Il existe deux types de boîtes : bloc et en ligne. Les éléments de bloc interrompent le flux de mise en page. C'est-à-dire qu'ils apparaissent seuls, insérant des "sauts de ligne". Les éléments en ligne suivent le flux et sont contenus dans des éléments de bloc.
Par exemple, un paragraphe serait un élément de bloc (nous ne pouvons pas avoir un paragraphe à côté de l'autre, mais deux paragraphes d'affilée apparaîtront l'un en dessous de l'autre. D'autre part, un lien est un élément en ligne, car il ne "couper" le texte où se trouve.
Les pièces qui composent chaque boîte et leur ordre d'affichage du point de vue de l'utilisateur sont les suivantes :
Contenu (contenu) : c'est le contenu HTML de l'élément (les mots d'un paragraphe, une image, le texte d'une liste d'éléments, etc.)
Rembourrage: Espace libre facultatif entre le contenu et la bordure.
Frontière: ligne qui entoure complètement le contenu et son remplissage.
Image de fond: Image affichée derrière le contenu et l'espace de remplissage.
Couleur de l'arrière plan: couleur affichée derrière le contenu et l'espace de remplissage.
Marge (marge) : séparation facultative entre la case et les autres cases adjacentes.
Le rembourrage et la marge sont transparents, donc l'espace occupé par le rembourrage montre la couleur ou l'image d'arrière-plan (si défini) et l'espace occupé par la marge montre la couleur d'arrière-plan ou l'image de votre élément parent (si défini). Si aucun élément parent n'a de couleur ou d'image d'arrière-plan définie, la couleur ou l'image d'arrière-plan de la page est affichée (si elle est définie).
Si une case définit à la fois une couleur et une image d'arrière-plan, l'image a la priorité la plus élevée et est celle qui est affichée. Cependant, si l'image d'arrière-plan ne recouvre pas complètement la zone de l'article ou si l'image a des zones transparentes, la couleur d'arrière-plan est également affichée. En combinant des images transparentes et des couleurs d'arrière-plan, des effets graphiques très intéressants peuvent être obtenus.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif
