Quand on fait du CSS,
il y a des choses que tu ne connais pas avant qu'on t'en parle !
Par exemple c termes :
♦️box-sizing
♦️content-box
♦️border-box
♦️box-model
Mais c’est ton jour de chance car je l’ai expliques ici ❤️
#RT car 💪
👇 #thread
il y a des choses que tu ne connais pas avant qu'on t'en parle !
Par exemple c termes :
♦️box-sizing
♦️content-box
♦️border-box
♦️box-model
Mais c’est ton jour de chance car je l’ai expliques ici ❤️
#RT car 💪
👇 #thread
Le box-model se présente comme ça
On peut le comparer à une personne :
le content est le corps de la personne 🚶
le padding est l'espace entre son corps et ses vétement
la border sont les vétement
la margin est l'espace qu'elle a autour d'elle
On peut le comparer à une personne :
le content est le corps de la personne 🚶
le padding est l'espace entre son corps et ses vétement
la border sont les vétement
la margin est l'espace qu'elle a autour d'elle
Maintenant si je dis à une box qu'elle fait 100px de width et de height et qu'en plus elle a une margin de 10px rouge
Quelle est sa taille ?
Alors 100 + 10 (border right) + 10 (border left) = 120px
C'est étrange !
Je lui demande de faire 100px mais en réalité elle en fait 120
Quelle est sa taille ?
Alors 100 + 10 (border right) + 10 (border left) = 120px
C'est étrange !
Je lui demande de faire 100px mais en réalité elle en fait 120
Maintenant petit use-case tricky :
Si un enfant est dans son parent et qu'il définit sa width comme 100% avec une border de 10px => boom 💥 on dépasse la taille du parent
Totalement contre intuitif n'est ce pas
La width ici c'est 100% + 10 + 10 🤕
Si un enfant est dans son parent et qu'il définit sa width comme 100% avec une border de 10px => boom 💥 on dépasse la taille du parent
Totalement contre intuitif n'est ce pas
La width ici c'est 100% + 10 + 10 🤕
Et si tu es attentif tu as pu voir le petit "box-sizing" dans le code ci-dessus pris de la doc : developer.mozilla.org/fr/docs/Web/CS…
Le box-sizing à deux propriétés :
* content-box
* border-box
Le box-sizing à deux propriétés :
* content-box
* border-box
En fait, c'est tout simplement pour définir sur quoi le width est calculé
si c'est content-box la width sera calculé uniquement avec le content et la border border et le padding seront « ajouté » à notre élément
Car oui, le padding fait le même effet que la bordure
si c'est content-box la width sera calculé uniquement avec le content et la border border et le padding seront « ajouté » à notre élément
Car oui, le padding fait le même effet que la bordure
Alors qu'avec border-box tout est beaucoup plus intuitif
La width et la height vont prendre en compte le padding et la border !
donc pour le même cas qu'avant (width, height = 100 + border 10px)
on sera toujours à 100px de taille
La width et la height vont prendre en compte le padding et la border !
donc pour le même cas qu'avant (width, height = 100 + border 10px)
on sera toujours à 100px de taille
ici ce sera bien le content qui va réduire pour être à 80 afin que le total
content + padding + border
soit égal à 100
content + padding + border
soit égal à 100
Conclusion, il faut toujours utiliser border-box et il est souvent mis par défaut dans les templates de projets !
Fin de ce petit thread !
Follow moi (ici → @melvynxdev ←)
dernier thread :
Follow moi (ici → @melvynxdev ←)
dernier thread :
https://twitter.com/melvynxdev/status/1541824129199792128
• • •
Missing some Tweet in this thread? You can try to
force a refresh
