CATALOGUE Code & Data Formation XHTML/CSS Apprendre XHTML & CSS Comprendre le Box Model en CSS

Comprendre le Box Model en CSS

Le modèle de boite CSS : hauteur et largeur
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre XHTML & CSS
Revoir le teaser Je m'abonne
3,0
Transcription
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
3,0
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction au Box Model

Objectifs

L'objectif de cette vidéo est de fournir une compréhension approfondie du modèle de boîte en CSS, de ses propriétés associées et de leur utilisation effective pour concevoir des mises en page web.

Résumé

Découvrez les fondements du modèle de boîte en CSS et les différentes propriétés associées comme margin, border, padding, width et height.

Description

Dans cette leçon, nous allons explorer le modèle de boîte en CSS ou box model en anglais. Nous détaillerons les propriétés margin, border, padding, ainsi que width et height, qui permettent de définir la largeur et la hauteur d'un élément. En partant de la documentation officielle du W3C, nous observerons un schéma illustrant une boîte avec sa zone de contenu, son padding, sa border et sa marge. Nous utiliserons ensuite un fichier de test simple pour expérimenter ces différentes propriétés et comprendre leurs interactions.

Nous aborderons également les unités de mesure en CSS, comme les pixels, centimètres, et EM, ainsi que les propriétés width et height maximales et minimales. Enfin, nous verrons comment la définition de hauteurs fixes peut poser des problèmes d'affichage et pourquoi il est important de faire attention à ces aspects pour garantir une bonne expérience utilisateur.

Voir plus

Questions fréquentes

Qu'est-ce que le modèle de boîte en CSS?
Le modèle de boîte en CSS est un concept fondamental qui décrit comment les éléments HTML sont représentés sous forme de boîtes, comprenant leurs marges, bordures, padding et zones de contenu.
Pourquoi est-il important de comprendre les valeurs par défaut des propriétés CSS?
Comprendre les valeurs par défaut des propriétés CSS est crucial car elles influencent la manière dont les éléments apparaissent et se comportent avant toute personnalisation, et permettent ainsi de mieux anticiper les rendus visuels par défaut des navigateurs.
Comment le zoom du texte dans un navigateur peut-il affecter l'affichage des éléments en CSS?
Le zoom du texte dans un navigateur peut faire déborder le contenu d'un élément si la hauteur de cet élément a été fixée avec la propriété height. Il est donc préférable d'utiliser des unités relatives comme EM ou des hauteurs minimales pour garantir un affichage adaptable.

Programme détaillé

1 commentaire
3,0
1 vote
5
4
3
2
1
Azraël
Il y a 3 ans
Dans l'ensemble bon cours, toutefois pas adapté au débutant car très touffu.
Je me perds toujours dans les marges, les paddings et les positionnements!
Beaucoup de petites astuces, bienvenues.
Gros défaut: tous les écrans sont flous, et le son est exécrable.