Présentation des dernières unités de longueur dans CSS3

Instructions de marquage :

Les numéros sont marqués pour les zones de doute

Essayez de donner une traduction en anglais après le nom propre, car la documentation officielle est essentiellement en anglais, et il peut y avoir des différences et des ambiguïtés après traduction par chaque lecteur.

Aperçu :

em : La taille de la police par rapport au texte dans l'objet actuel. Taille de la police relative au nœud parent

rem : Taille de la police relative à l'élément racine . Scénario d'application : La mise en page est déterminée par le contenu du texte.

vh et vv : 1vh est égal à 1/100 de la hauteur de la fenêtre ^①, 1vw est égal à 1/100 de la largeur de la fenêtre.

vmin et vmax : Concernant la valeur minimale ou maximale de la hauteur et de la largeur de la fenêtre, vmin est égal à la valeur minimale de 1/100 de la largeur et de la hauteur de la fenêtre. Scénario d'application : Rendre un élément toujours visible à l'écran.

ch : la largeur du chiffre 0

ex : la hauteur de la lettre minuscule x de la police actuelle ou 1/2 de 1em^②. Scénarios d'application : exposants et indices

Informations extraites :

1. font-size : s'ils ne sont pas déclarés, les attributs du nœud parent seront hérités

Extension :

①fenêtre, document, largeur et hauteur du corps :

la hauteur du corps est la hauteur de l'élément de corps (y compris les barres de défilement des bordures, etc.), et la valeur par défaut environnante Avec une marge de 8 px

Si la couleur n'est pas définie pour le HTML et que la couleur est définie pour le corps, la couleur du corps remplit tout l'arrière-plan

La fenêtre d'affichage fait référence à la plage visible du navigateur, à l'exception de la zone d'affichage du document composée des bordures, des barres de défilement et des barres d'outils

②Comment 0,5em peut-il être égal à 1ex ?

Après des tests réels, il a été constaté que les performances des réglages de 0,5em et 1ex sont légèrement différentes. Après tout, les lettres x minuscules ne sont pas égales à la moitié de la taille de la police. Bien entendu, on ne peut pas exclure qu'il existe une police qui remplisse juste cette condition

relative : elle sera décalée à la position appropriée. La position originale de dom est conservée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!