1. Unité de longueur en CSS
En CSS, de nombreuses valeurs utilisent la longueur comme valeur. Les attributs du modèle de boîte sont des attributs de valeur évidents : largeur, hauteur, marge, remplissage et bordure. De plus , il existe de nombreux attributs CSS dont les valeurs sont également des valeurs de longueur, telles que le décalage, la taille de l'ombre de la boîte ou la taille de la police, l'espacement, etc. Il existe de nombreuses unités de longueur en CSS. Nous en discuterons ci-dessous. sur les unités de longueur et leurs utilisations.
2. Une brève introduction (quelles sont les unités de longueur :)
Il existe deux types d'unités de longueur en CSS : la longueur absolue et la longueur relative .
Longueur absolue : px, po, cm, mm, pt, pc ;
Longueur relative : em, rem, ex, vh, vw, vmin, vmax, %, fr.
3. Introduction détaillée
1. Unité absolue de longueur
L'unité de longueur absolue représente une taille physique réelle. Sa taille est fixe et ne changera pas en raison des changements de taille des autres éléments. Le tableau suivant répertorie les unités de longueur absolue prises en charge dans CSS.
px : représente les pixels relatifs à la résolution de l'écran. La page est affichée en pixels précis et ne changera pas en raison des changements de taille des autres éléments. Les pixels sont toujours l' unité de mesure la plus courante, par exemple : pour les fenêtres La résolution. utilisée par les utilisateurs Mac est de 96 pixels/pouce, tandis que la résolution utilisée par les utilisateurs Mac est généralement de 72 pixels/pouce. L'unité dans le langage JavaScript général est le pixel utilisé.
div{largeur:200px;}in : inch est un fichier de mesure physique, mais dans le champ CSS, le pouce est simplement mappé directement en pixels. (1 pouces == 2,54 cm == 96 px)
div{largeur:2 pouces;}c m : Le centimètre est une unité de mesure physique familière et utile. Il est également mappé en pixels. (1 cm == 37,8 px)
div{largeur:20 cm;}mm : Le millimètre est une unité physique de mesure d’un petit ordre de grandeur. (1 mm == 0,1 cm == 3,78 px)
div{largeur : 200 mm ;}p t : Les points sont également des unités physiques de longueur. (1pt == 1/72in == 96/72px)
div{largeur:20pt;}pc : Pica est identique aux points, sauf (1pc == 12pt).
div{largeur:20pt;}Exemple:
<!DOCTYPEhtml><html><head><title>Unité de longueur absolue</title><style>.box{width:4in;height:4.5cm;border:2mmsolidblack;font-size:16px;}.pt{font {font -size:2pt;}.pc{font-size:3pc;}</style></head><body><divclass=box>Ceci est une police de 16 px<pclass=pt>Ceci est une police de 2 pts< /p ><pclass=pc>Ceci est la police de 3pc</p></div></body></html>Les résultats présentés sont les suivants :
2. Unité de longueur relative
L'unité de longueur relative signifie que cette unité n'a pas de valeur fixe. Sa valeur est affectée par d'autres attributs de l'élément (tels que la taille de la fenêtre du navigateur et la taille de l'élément parent). L'unité de longueur relative est très adaptée au responsive. mise en page. Le tableau suivant répertorie les unités de longueur relative prises en charge dans CSS.
em : em est une unité relative, relative à la taille de police du texte dans l'objet actuel. Si la taille de police dans la ligne actuelle n'a pas été définie, elle est relative à la taille de police par défaut du navigateur. Initialement, la mesure de composition est basée sur la taille de la lettre majuscule M de la police actuelle. Lorsque la famille de polices est modifiée, sa taille ne changera pas, mais lorsque la taille de police est modifiée, sa taille changera. em héritera de la taille de police de l'élément parent. (Il y a des exemples d'em et de rem ci-dessous)
Sans aucune règle CSS : (1em == 16px == 0,17in == 12pt == 1pc == 4,2mm == 0,42cm)
div{largeur:40em;}re em : rem est une unité relative comme em, mais contrairement à em, rem est toujours relatif à l'élément racine (comme : root{}), contrairement à em, qui utilise la méthode en cascade pour calculer la taille. Cette unité relative est plus simple à utiliser.
div{largeur:40rem;}ex : Unité de longueur relative, par rapport à la hauteur du caractère Taille de police par défaut. Contrairement à em, em ne changera pas lorsque la famille de polices est modifiée, mais l'unité ex changera car la valeur d'une unité et cette police ont une relation de contrainte particulière.
div{largeur:40ex;}ch : La connotation de ch est similaire à la hauteur de ex par rapport à x, sauf que ch est basé sur la largeur du caractère 0 au lieu de la hauteur du caractère x. 1ch est la largeur du chiffre 0. Lorsque la famille de polices change, ch changera également.
div{largeur:40ch;}vw : vw (largeur du point de vue) est l'unité de largeur visuelle (largeur de la fenêtre). 1vw est égal à un pour cent de la largeur de la zone visuelle. L'unité vw est très similaire au pourcentage. de vw s'appliquent à tous les éléments. De la même manière, quel que soit leur élément parent ou la largeur de l'élément parent, un peu comme les unités rem sont toujours relatives à l'élément racine. (Il y a des exemples de vh et vw ci-dessous)
div{largeur:40vw;}vh : Les unités de vh (hauteur de la fenêtre) et vw (largeur de la fenêtre) sont les mêmes. Les différents vh sont relatifs à la hauteur de la zone visuelle (hauteur de la fenêtre).
div{largeur:40vh;}vmin : La valeur de vmin est la valeur la plus petite parmi les valeurs vw et vh actuelles. Dans l'exemple d'utilisation du type de taille standard, par rapport aux unités vw et vh qui déterminent vous-même la taille de l'écran, vmin est une métrique plus utile.
div{largeur:40vmin;}vmax : La valeur de vmax est la plus grande valeur entre vw et vh.
div{largeur:40vmax;}% : Pourcentage, la valeur de longueur en pourcentage est basée sur la valeur de longueur de l'élément parent avec le même attribut. Par exemple : si la largeur d'un élément est de 450 px et que la largeur de l'élément enfant est définie sur 50 %, alors le l'élément enfant est rendu. La largeur est de 225 px. (Si aucune valeur spécifique n'est définie pour tous les éléments parents, la définition du pourcentage de hauteur entraînera la valeur de tous les éléments à 0).
div{largeur:40%;}fr : Une unité de longueur utilisée dans la disposition en grille, nous utilisons souvent fr pour le calcul.
L'instruction suivante déclare une grille de trois lignes. La hauteur de la première ligne est de 30 px, la hauteur de la deuxième ligne est également de 30 px et la hauteur de la troisième ligne est de 60 px.
lignes de modèle de grille : 30px1fr2fr ;
Exemple:
<!DOCTYPEhtml><html><head><title>Unité de longueur relative</title><style>.box{width:60vw;height:88vh;border:1exsolidblack;font-size:16px;}.info{font- size:2em;}.ex>span{font-size:3ex;}.ch>span{font-size:4ch;}</style></head><body><divclass=box>Il s'agit d'une police de 16 px <pclass=info>Voici la police de 2em</p><pclass=ex>x : <span>Voici la police de 3ex</span></p><pclass=ch>0 : <span>Ceci est la police 4ch</span></p></div></body></html>Montré ci-dessous :
3. Résumé des unités de longueur :
(1) Tout d'abord, nous devons comprendre une chose, c'est-à-dire quelle est exactement la résolution de l'écran ? Nous savons que sous différentes résolutions, la taille des pixels est différente, donc la même page Web utilise px comme unité de longueur. en même temps, la taille d'affichage est différente selon les résolutions. À basse résolution, les pixels sont plus grands et les détails ne sont pas assez clairs. Bien que la page affichée soit également grande, elle est floue.
(2) En fait, toutes les unités, qu'elles soient relatives ou absolues, (lorsqu'elles sont affichées à l'écran) sont finalement converties en unités px, donc de manière générale, lors de la création de pages Web, l'unité de base Choisissez px au lieu de pt, car pt est également converti en px pour l'affichage via le DPI du navigateur (par exemple, le DPI de FireFox est de 96, donc 9pt = 12px). Non seulement pt, cm, in, mm et d'autres unités sont également converties en px, donc qu'elles soient absolues ou relatives, elles changeront à différentes résolutions. Ne pensez pas que si la longueur est réglée sur 3 cm, elle changera à. différentes résolutions. La résolution reste inchangée à 3 cm.
(3) Je pense que pt est toujours une unité très utile, surtout lors de l'impression. Maintenant, certaines pages Web ont été implémentées pour afficher une page et imprimer d'une autre manière. Utilisons pt ci-dessus, car pour différentes résolutions, l'imprimé. les pages ont la même taille. C'est la première caractéristique de l'unité absolue, mais il faut quand même se rappeler que sur l'écran, cette unité ne représente pas la longueur physique réelle, elle doit également être ajustée en fonction de la taille réelle du pixel (cela est lié à la résolution).
(4) En fait, nous pouvons le comprendre de cette façon, considérer px comme une unité absolue (unité absolue sur l'écran), et d'autres unités sont basées sur elle, comme em, qui est la hauteur par rapport à la police de texte actuelle ( Supposons que la taille actuelle de la police du texte soit de 12 px et que nous définissions la nouvelle police sur 1,5 em, puis la nouvelle taille de police est convertie en 12 * 1,5 = 18 px). Ce que vous devez retenir, c'est que em est la hauteur par rapport à l'élément parent. . degré, en supposant que nous définissons la police sur 12px dans le premier div, 1,5em au deuxième niveau et 1,5em au troisième niveau. En fait, l'affichage de la police est : 12px au premier niveau, 18px au deuxième niveau. , et 1,5em au troisième niveau 3 18 * 1,5 = 27px.