TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Tutoriel sur le modèle de boîte CSS

32

CSS est un excellent outil pour la conception de sites Web frontaux. La popularité n’est pas seulement due à la facilité d’utilisation, mais également à des fonctionnalités robustes. CSS affecte chaque élément d’une page Web. Par conséquent, chaque concepteur de sites Web étant un développeur principal pour de simples concepteurs de mise en page, doit connaître les bases du CSS. Le modèle de boîte en CSS est la base pour définir les mises en page et le positionnement des éléments sur une page. Dans cet article, nous allons explorer en détail les bases du modèle de boîte CSS. De plus, nous verrons également comment analyser le modèle de boîte d’un élément dans un navigateur.



Qu’est-ce que le modèle de boîte CSS ?

Lors de l’utilisation de CSS, chaque élément HTML d’une page Web est considéré comme une boîte rectangulaire. Par conséquent, le concept est appelé modèle de boîte. Cela permet de définir facilement la mise en page d’une page Web et de positionner les éléments à aligner selon vos besoins. Dans le modèle de boîte, le contenu d’un élément HTML est positionné au centre et suivi d’un remplissage, d’une bordure et d’une marge comme indiqué ci-dessous :

Tutoriel sur le modèle de boîte CSS

Élément de modèle de boîte CSS

  • Marge – c’est la zone autour de la frontière et est toujours transparente. Le but de la marge est de fournir l’espace nécessaire entre les éléments et depuis les bords du navigateur.
  • Bordure – il s’agit d’une ligne visible autour du contenu et de la zone de remplissage. Généralement, il est utilisé pour fournir un contour à un élément et peut avoir n’importe quelle couleur et largeur.
  • Remplissage – l’espace entre le contenu réel et la bordure est appelé remplissage. Lorsque le contenu a des lignes de bordure visibles, il est approprié d’avoir un peu de remplissage. Cela aidera à créer un espace entre le contenu et la bordure.
  • Contenu – contenu réel comme le texte et l’image entre les balises HTML.

Connexe : Tutoriel sur les unités CSS pour les débutants.

Exemple d’élément de modèle de boîte

Faisons un exemple simple de création d’un paragraphe dans les balises div pour expliquer le concept de modèle de boîte. Le CSS devrait ressembler à ci-dessous :

<style> .box-model { margin: 30px 5px 5px 15px; padding: 10px 0 10px 5px; border: 10px solid red; text-align: justify; } </style>

Notez que le code CSS pour la marge et le remplissage contient respectivement les dimensions du haut, de la gauche, du bas et de la droite.

Et le code HTML pour insérer le contenu avec le css ci-dessus est :

<div class="box-model"> <p>This is a test content to explain how CSS box model will look like. This is a paragraph with different padding, different margin and border of 10px.</p> </div>

La sortie du code ci-dessus ressemblera à ci-dessous sur le navigateur. Comme mentionné, la marge ne peut pas être vue car elle est transparente.

Tutoriel sur le modèle de boîte CSS

Affichage du modèle de boîte CSS d’un élément dans le navigateur IE 11

Comment vérifier le modèle de boîte CSS sur un navigateur ?

C’est une bonne idée de voir la théorie d’une manière pratique. Vous pouvez voir le modèle de boîte CSS d’un élément directement depuis votre navigateur Web. Ici, nous montrons la capture d’écran avec le navigateur Google Chrome. La méthode reste la même pour tous les autres navigateurs comme Firefox, Edge et Safari.

  • Ouvrez n’importe quelle page Web et faites un clic droit sur l’élément que vous souhaitez explorer.
  • Vous pouvez faire un clic droit sur n’importe quel texte, image, vidéo ou espace vide.
  • Choisissez l’option "Inspecter l’élément" pour ouvrir la console du développeur.
  • Il a un volet gauche pour afficher le HTML et un volet droit pour afficher le CSS.
  • Vous pouvez voir le modèle de boîte CSS de l’élément choisi sous l’onglet "Mise en page" du volet de droite.
  • En vous référant à l’exemple de code ci-dessus, toutes les bordures, marges et rembourrages correspondront aux dimensions exactes définies dans le CSS.

Notez que vous pouvez afficher le balisage HTML d’un élément dans le navigateur Google Chrome sous l’onglet « Éléments ». Le CSS et le modèle de boîte correspondants peuvent être vus sous l’onglet "Styles", comme indiqué dans l’image ci-dessous.

Tutoriel sur le modèle de boîte CSS

Affichage du modèle de boîte CSS d’un élément dans le navigateur Chrome

Calcul de la largeur et de la hauteur d’un élément dans le modèle de boîte CSS

Maintenant que vous avez compris le concept de modèle de boîte CSS. Chaque fois que vous définissez la hauteur et la largeur d’un élément, la largeur totale et la hauteur totale de cet élément doivent inclure la marge, le remplissage et la largeur de la bordure. Ajoutons la hauteur et la largeur à l’exemple de code CSS ci-dessus :

<style> .box-model { margin: 30px 5px 5px 15px; padding: 10px 0 10px 5px; border: 10px solid red; text-align: justify; width: 300px; height: 200px; } </style>

Articles Liés:


Maintenant, tout élément qui appelle le style de la classe CSS «​​box-model» doit être positionné avec la largeur totale et la hauteur totale suivantes.

  • Hauteur totale = Hauteur + Marge supérieure + Marge inférieure + Rembourrage supérieur + Rembourrage inférieur + Largeur de la bordure = 200 + 30 + 5 + 10 + 10 + 10 = 265px.
  • Largeur totale = Largeur + Marge gauche + Marge droite + Rembourrage gauche + Rembourrage droit + Largeur de la bordure = 300 + 15 + 5 + 0 + 5 + 10 = 335px.

La mise en page complète sera conçue en tenant compte des dimensions de largeur totale et de hauteur totale de chaque élément.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails