Compagnon de code
CSS : l'essentiel, avec style !
Leçons :
Découverte & Sélecteurs
18:11
Styliser les textes
18:47
Comprendre les couleurs
14:11
Les backgrounds Color
10:49
Les modèles de boîtes
25:10
Notion de Clamp, le min et le max
09:12
Arrondis et Hover
14:57
Les Display
09:21
Invisibilité & Morale
08:57
Transformer des éléments ?
15:29
Les Positions
24:18
Positions & Précautions
08:11
MEP : Les positions
22:37
Les bases de Flexbox
36:54
MEP : un dé en flexbox
27:06
MEP : des cartes flexibles
19:08
Les animations en CSS
21:03
MEP : un système solaire animé
27:00
MEP : Un texte qui défile ?
09:12
MEP : un loader... des points sauteurs !
07:38
Sélectionner un enfant
07:04
Les variables CSS
15:42
Responsivité et Media Queries
19:36
Enoncé Exercice Twitter
05:15
Un clone de Twitter
54:11
Un site complet et Responsive en HTML / CSS
02:12:46
Notice
=> leçons
=> express
=> exercices
=> projets
Leçons :
Découverte & Sélecteurs
18:11
Styliser les textes
18:47
Comprendre les couleurs
14:11
Les backgrounds Color
10:49
Les modèles de boîtes
25:10
Notion de Clamp, le min et le max
09:12
Arrondis et Hover
14:57
Les Display
09:21
Invisibilité & Morale
08:57
Transformer des éléments ?
15:29
Les Positions
24:18
Positions & Précautions
08:11
MEP : Les positions
22:37
Les bases de Flexbox
36:54
MEP : un dé en flexbox
27:06
MEP : des cartes flexibles
19:08
Les animations en CSS
21:03
MEP : un système solaire animé
27:00
MEP : Un texte qui défile ?
09:12
MEP : un loader... des points sauteurs !
07:38
Sélectionner un enfant
07:04
Les variables CSS
15:42
Responsivité et Media Queries
19:36
Enoncé Exercice Twitter
05:15
Un clone de Twitter
54:11
Un site complet et Responsive en HTML / CSS
02:12:46
Notice
=> leçons
=> express
=> exercices
=> projets
Les modèles de boîtes
Par défaut, la largeur et la hauteur d’un élément n’incluent pas les border et les paddings.
Même si je ne parle que des borders dans la video, les padding sont aussi à prendre en compte !
Résultat ? L’élément devient plus grand que prévu.
La solution ?
* {
box-sizing: border-box;
}
Un élément de 400px fera la même taille qu'un autre élément comme :
.my-box{
width : 370px;
height : 370px;
border : 5px solid black;
padding : 10px;
}
Puisque :
370
+ 2 x 5 pour les border (haut et bas ou gauche et droite)
+ 2 x 10 pour les paddings (haut et bas ou gauche et droite)
_____________________________________________
= 400 px
Afin d'appliquer cette solution à tous nos éléments,
nous le mettons en tête de notre CSS et le faisons passer à travers le sélecteur universel : *{...}
En ce qui concerne les unités de mesure en CSS,
px→ Fixevw→ % de la largeur de la fenêtrevh→ % de la hauteur de la fenêtre%→ % de son parent
Il existe d'autres unités, je vous montre celle que j'utilise pour ma part.
Écrit en 02/25 par Christophe C.
Mis à jour en 02/25