Unités de longueur dans CSS
Dans CSS, les unités de longueur sont utilisées pour définir la dimension d'un élément HTML. Ces unités peuvent avoir des valeurs fixes ainsi que des valeurs dynamiques pour une interface réactive. Pour cette raison, ils sont classés en deux classes absolu et relatif. Le absolu La classe contient les unités qui offrent des valeurs fixes tandis que le relatif La classe a des unités qui modifient leurs valeurs en fonction de leur parent ou de leur élément racine.
Les unités de longueur sont principalement utilisées pour définir la largeur, la hauteur, le rembourrage, la marge, la bordure, la taille de la police et bien plus encore. Gardant à la vue de l'importance, ce guide fournit un aperçu des unités de longueur dans CSS avec les résultats d'apprentissage suivants.
- Liste des unités de longueur en classe absolue
- liste des unités de longueur en classe relative
- Utilisation des unités de longueur absolue et des unités de longueur relative
Unités de longueur CSS
Cette section interdit les unités de longueur dans leur catégorie respective. Les unités de longueur sont largement classées en deux catégories, Absolu et relatif. Explorons les unités qui relèvent de ces catégories et leur utilisation.
Comment utiliser des unités de longueur absolue
Cette catégorie contient ces unités de longueur qui ont valeur fixe à travers l'ensemble du document. Dans les situations où la taille fixe d'un élément est nécessaire, ces unités servent mieux à l'objectif. Cependant, les unités de longueur absolue ne conviennent pas aux conceptions réactives. Le tableau suivant fournit la liste et la description des unités de longueur absolue.
| Unité | Symbole | Relation |
|---|---|---|
| Pouce | dans | 1in = 1in ou 1in = 96px |
| Centimètre | cm | 1in = 2.5cm ou 1 cm = 38px |
| Millimètre | MM | 1in = 25 mm ou 1 mm = 3.84px |
| Picas | PC | 1in = 6pc ou 1pc = 16px |
| Points | pt | 1in = 72pt ou 1pt = 1.13px |
| Pixels | px | 1in = 96px ou 1px = 1px |
Dans le tableau ci-dessus, la plus grande unité est "Pouces (in)" Alors que la plus petite unité est "Pixels (PX)". Parmi ceux-ci, le px L'unité est le plus pratiquée.
Exemple: en utilisant des unités de longueur absolue
Le code suivant montre l'utilisation de In, PX, PT et MM Unités de longueur.
Html
Largeur et hauteur en pixels (PX)
Largeur et hauteur des points (PT)
Largeur et hauteur en millimètre (mm)
Dans le code ci-dessus, trois paragraphes sont enfermés dans un élément unique (sert d'élément parent)
CSS
À partir de CSS ci-dessus, la largeur et la hauteur de la div élément est en pouces alors que PX, PT et MM sont utilisés comme unités de longueur dans les paragraphes.
Sortir
À partir de la sortie, il est observé que les éléments enfants (paragraphes) ne sont pas influencés par leur élément parent ().
Comment utiliser des unités de longueur relative
Les unités de longueur relative manipulent dynamiquement la taille de l'élément par rapport à leur parent ou à l'élément racine. La liste suivante fait référence aux unités de longueur relative CSS.
| Unité | Symbole | Description |
|---|---|---|
| Pourcentage | % | Le pourcentage relatif de l'élément parent |
| Éphémère | em | Se réfère à la taille de la police de l'élément parent |
| Racine éphémère | remorqueur | Se réfère à la taille de la police de l'élément racine |
| Largeur de la fenêtre | vw | Par rapport au navigateur-fenêtre |
| Hauteur de la fenêtre | vh | Par rapport au navigateur-fenêtre-hauteur |
| Personnage | ch | Par rapport à la largeur du personnage «0» |
| Unité ex | ex | Par rapport à la hauteur de «x (cas inférieur)» |
| Le minimum de la fenêtre | vmin | Le VMIN fait référence à la hauteur ou à la largeur minimale du navigateur-fenêtre |
| Maximum de la fenêtre | vmax | Le Vmax se rapporte à la hauteur / largeur maximale du navigateur-fenêtre |
Note: Dans le cas, s'il n'y a pas d'élément parent, les unités sont ajustées en fonction de l'élément racine ().
Exemple: utilisant des unités de longueur relative
Cet exemple fournit l'utilisation de diverses unités de longueur relative.
Html
Largeur et hauteur en pourcentage selon l'élément parent
Largeur et hauteur dans EM (selon le parent)
Largeur et hauteur dans REM (selon Root)
Dans le code ci-dessus, trois paragraphes sont créés et sont contenus dans un élément parent (div). Ces paragraphes utilisent diverses unités de longueur relative (pourcentage, EM et REM) Pour définir la largeur et la hauteur.
CSS
Dans le code CSS ci-dessus, la largeur, la hauteur, la couleur d'arrière-plan et la bordure de l'élément parent sont définies. Le .par , .em, et .Les classes REM définissent la hauteur / largeur en pourcentage (%), éphémère (EM) et éphémère racine (REM).
Note: Comme la taille de police par défaut de Div est 16px, donc 1em = 16px et 1rem = 16px. Le remorqueur définit la taille en fonction de l'élément racine (corps) tandis que le em définirait la valeur en fonction de l'élément parent (div).
Sortir
À partir de la sortie, il est observé que le pourcentage et unités EM ajustez la largeur / hauteur en fonction de l'élément parent (div) tandis que le remorqueur L'unité définit la largeur / hauteur par rapport à l'élément racine (corps).
Conclusion
Dans CSS, les unités de longueur sont classées en deux catégories plus larges: unités de longueur absolue et unités de longueur relative. Les unités de longueur absolue ont des valeurs fixes tandis que les unités relatives modifient leurs valeurs en fonction de leur parent ou de leur élément racine. Les unités de longueur absolue sont PX, PT, PC, IN, CM et MM, et les unités%, EM, REM, VW, VHM VMIN, VMAX, et ex tombent sous des unités relatives. Pour une meilleure compréhension, nous avons démontré l'utilisation de ces unités à l'aide d'exemples.