La différence entre les unités relatives et les unités absolues en CSS

Quelle est la différence entre les unités relatives et les unités absolues en CSS ? Des exemples de code spécifiques sont nécessaires

Les unités en CSS peuvent être divisées en unités relatives et unités absolues. Les unités relatives déterminent la taille par rapport à la taille de l'élément lui-même ou de son élément parent, tandis que les unités absolues déterminent la taille par rapport à la taille de l'écran ou du support d'impression. Cet article présentera en détail la différence entre les unités relatives et les unités absolues en CSS et fournira des exemples de code correspondants.

1. Unité relative

1. em

em est une unité déterminée par rapport à la taille de la police de l'élément parent. Lorsque vous définissez la taille de police d'un élément sur 1em, elle sera égale à la taille de police de l'élément parent. Les ems peuvent être utilisés consécutivement, chaque em étant calculé par rapport à la taille de l'em précédent. Par exemple, si la taille de police de l'élément parent est de 16 px et que la taille de police de l'élément enfant est définie sur 1,5 em, alors la taille de police de l'élément enfant est de 24 px (1,5 * 16 px).

Exemple de code :

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em;
}

2. rem

rem est également une unité relative, mais elle est déterminée par rapport à la taille de la police de l'élément racine (élément html). L'utilisation de rem est similaire à em, mais il n'hérite pas de la taille de police de l'élément parent, mais uniquement de la taille de police de l'élément racine. Cela évite le calcul cumulatif des tailles de police lors de l'imbrication de plusieurs niveaux.

Exemple de code :

html {
  font-size: 16px;
}

.child {
  font-size: 1.5rem;
}

2. Unité absolue

1. px

Le pixel (pixel) est une unité absolue, c'est la plus petite unité affichée à l'écran. px est utilisé en CSS pour définir la largeur, la hauteur, la bordure et d'autres tailles des éléments. Elle n'est pas affectée par le zoom du navigateur et la taille des pixels reste la même quelle que soit la manière dont l'utilisateur redimensionne la fenêtre du navigateur.

Exemple de code :

element {
  width: 200px;
  height: 100px;
  border: 2px solid #000;
}

2. cm

Le centimètre (centimètre) est une unité absolue, relative à la taille physique. L'utilisation d'unités cm dans les supports d'impression permet un contrôle plus précis de la taille des éléments.

Exemple de code :

element {
  width: 10cm;
  height: 5cm;
}

Ce qui précède est la différence entre les unités relatives et les unités absolues en CSS et les exemples de code correspondants. Grâce à la comparaison et à la pratique, nous pouvons mieux comprendre et appliquer ces unités et contrôler de manière flexible la taille et la disposition des éléments. Dans le développement réel, le choix de l'unité appropriée en fonction des besoins peut permettre à la page Web ou à l'application de mieux s'adapter aux effets d'affichage des différents appareils et tailles d'écran.

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!