recherche

Maison  >  Article  >  interface Web  >  Unités de longueur relative en CSS

Unités de longueur relative en CSS

WBOY
WBOYavant
2023-08-26 20:57:031257parcourir

En CSS, les unités de longueur relative sont utilisées pour spécifier une longueur par rapport à un autre attribut de longueur.

Exemple
Numéro de série Unité et description
1 em

par rapport à la taille de police de l'élément, c'est-à-dire que 4em signifie 4 fois la taille de police actuelle.

2 ex

hauteur x par rapport à la police actuelle
3 ch

largeur par rapport à 0
4 rem

Taille de la police par rapport à l'élément racine
5 vw

1% par rapport à la largeur de la fenêtre d'affichage*
6 vh

par rapport à 1 % de la hauteur de la fenêtre*
7 vmin

par rapport à la bouche de la fenêtre d'affichage * 1% de la plus grande taille

9 %

par rapport au élément parent

Regardons un exemple utilisant des unités de longueur relative : Démonstration 

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
   text-decoration-color: blue;
   font-size: 1.4em;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

Sortie
Exemple

Voyons maintenant un autre exemple −

Démonstration en direct

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
   text-decoration-color: blue;
   font-size: 4ch;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

Sortie

CSS 中的相对长度单位

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!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Définir la largeur de la boîte en utilisant CSSArticle suivant：Définir la largeur de la boîte en utilisant CSS

Articles Liés

Voir plus