28172 sujets

CSS et mise en forme, CSS3

Connaître les longueurs relatives et absolues

Bonjour,

Pourriez-vous s'il vous plaît partager une ressource pour mieux saisir les longueurs relatives/absolues ? Pour le contexte, je suis débutant.

J'ai du mal à apprécier la différence nuancée entre les unités et comment appliquer chacune aux éléments. Je ne peux pas visualiser comment https://showbox.tools/ l'espacement s'accumulerait à partir d'un document (par exemple, une page Web).

Par exemple, que dois-je penser des https://speedtest.vet/ dimensions d'une page Web ? Ensuite, appliquez-le à ses éléments. Et bien sûr, la marge/la bordure/le remplissage/le contenu de chaque élément.

Si vous avez une référence rudimentaire, je l'apprécierais beaucoup.
Modifié par lucasPeni (01 Oct 2021 - 11:19)
Administrateur
Bonjour,

Le modèle de boîte (MDN) présente dans sa 2e partie les crobards que je m'attend à voir dans une explication sur le modèle de boîte donc je suppose que c'est une bonne ressource. Smiley smile

En anglais mais avec plein de trucs interactifs pour tester directement : https://wattenberger.com/blog/css-percents (sympa)

Dans les navigateurs modernes, par défaut, width ne correspond pas à la largeur finale de l'élément si tu as du padding et/ou des bordures horizontales. C'est la place occupée par ton contenu (le texte, pour faire court).
La 1ère chose qu'on fait la plupart du temps - est de changer de modèle de boîte via 2 règles avec box-sizing: border-box et box-sizing: inherit. Ça fait partie de tous les "reset CSS" que je connais comme par exemple normalize.css. Avec ça, ton élément a la largeur que tu indiques mais tu ne connais pas la largeur que peut occuper ton contenu : ça dépend du padding et des bordures éventuelles.

Quand tu as compris comment est calculée la largeur d'un élément selon le modèle de boîte, alors tu peux t'intéresser aux unités.
vw pour ton viewport (la largeur de la fenêtre =100vw)
px, em, rem peuvent être calculés dans ton navigateur en px parce que tu y connais la taille de texte du parent ou de l'élément référence <html>
% eh c'est plus compliqué mais en général (toujours ?) ça fait référence au parent qui a une largeur (c'est vite compliqué avec height: 100%; pour être sûr que ce soit appliqué. Je sais faire les yeux fermés mais pas expliquer clairement, déso)
Et il y a l'exception : le padding vertical exprimé en % se réfère à la LARGEUR du parent (MDN encore). Pas la hauteur ( Smiley eek )
Modifié par Felipe (30 Sep 2021 - 10:58)
Sujet clos
Aller à