CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3

Comprendre le Modèle de la Boîte en HTML et CSS

Retour à la formation
Chapitre 22 Leçon 5
Précédent
Suivant

Découvrez les différents plans du modèle de boîte en HTML et CSS.

Détails de la leçon

Description de la leçon

En résumé, si nous devions décomposer le modèle de la boîte HTML au niveau du rendu CSS, nous avons plusieurs plans. Le premier plan de la boîte va comporter le margin et le background color finalement. Ça c'est le premier plan. C'est comme si vous le voyiez la boîte avec un plan en multidimension. Donc le premier plan. Le deuxième plan sera le background image. C'est-à-dire nous pouvons insérer en CSS une image de fond, ce que nous verrons très rapidement. Le troisième plan du modèle de boîte contient donc les bordures et les paddings. Et le dernier plan qui est le quatrième plan va contenir le contenu. C'est-à-dire par exemple ici le texte c'est le dernier plan de notre boîte.

Objectifs de cette leçon

L'objectif de cette vidéo est de décrire les différents plans du modèle de boîte en HTML et CSS et d'expliquer comment chacun d'eux affecte le rendu visuel des éléments.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir une connaissance de base en HTML et CSS.

Métiers concernés

Cette connaissance est particulièrement utile pour les concepteurs UX/UI, les développeurs front-end et les intégrateurs web.

Alternatives et ressources

Pour le rendu visuel des boîtes, des alternatives comme Flexbox ou Grid Layout peuvent également être envisagées.

Questions & Réponses

Le premier plan du modèle de boîte en HTML et CSS comprend le margin et la couleur de fond.
Dans le deuxième plan du modèle de boîte, nous pouvons insérer une image de fond en CSS.
Le dernier plan du modèle de boîte contient le contenu, tel que le texte.