Quelles sont les similitudes et les différences entre les unités relatives et les unités absolues en CSS ?

CSS (Cascading Style Sheets) est un langage de balisage utilisé pour décrire les styles des éléments sur les pages Web. En CSS, il existe deux unités de longueur différentes, à savoir les unités relatives et les unités absolues.

Les unités relatives sont calculées par rapport à la taille de l'élément lui-même ou de son élément parent. Les unités relatives courantes sont : pourcentage (%), em et rem.

Les unités de pourcentage sont calculées par rapport à la taille de l'élément parent. Par exemple, si la largeur de l'élément parent est de 400 px et que la largeur de l'élément enfant est définie sur 50 %, alors la largeur réelle de l'élément enfant est de 200 px (400 px * 50 % = 200 px).

les unités em sont calculées par rapport à la taille de la police de l'élément lui-même. Par exemple, si la taille de police d'un élément est définie sur 16 px et que la largeur d'un élément enfant à l'intérieur est définie sur 2 em, alors la largeur réelle de l'élément enfant est de 32 px (16 px * 2 = 32 px). Les unités

rem sont également calculées par rapport à la taille de la police de l'élément racine (c'est-à-dire l'élément html). Cela signifie que peu importe où dans le document les unités rem sont utilisées, elles auront la même valeur. Par exemple, si la taille de police de l'élément racine est définie sur 16 px et que la largeur d'un élément est définie sur 2rem, la largeur réelle de l'élément est de 32 px (16 px * 2 = 32 px).

L'avantage des unités relatives est qu'elles peuvent ajuster dynamiquement le style d'un élément en fonction de la taille ou de la taille de la police de l'élément parent, permettant ainsi une conception réactive.

Les unités absolues sont des valeurs fixes spécifiées lors du processus de conception et ne changeront pas lorsque l'élément parent ou la taille de la police change. Les unités absolues courantes sont : les pixels (px), les points (pt) et les pouces (in).

L'unité pixel est la plus petite unité affichée à l'écran et est l'unité absolue la plus couramment utilisée. Par exemple, si la largeur d'un élément est définie sur 200 pixels, la largeur réelle de l'élément est de 200 pixels.

L'unité de points est une unité de longueur couramment utilisée dans l'industrie de l'imprimerie, et 1 point équivaut à 1/72 de pouce. En CSS, 1 pt est égal à 1,333 px (un pixel équivaut approximativement à 0,75 point), donc si la largeur d'un élément est définie sur 150 pt, la largeur réelle de l'élément est de 200 px (150 pt * 1,333 = 199,95 px).

L'unité en pouces est une unité de longueur acceptée au niveau international, 1 pouce équivaut à 25,4 millimètres. Si la largeur d'un élément est définie sur 2 pouces, la largeur réelle de l'élément est de 50,8 mm (2 pouces * 25,4 = 50,8 mm).

L'avantage des unités absolues par rapport aux unités relatives est qu'elles offrent un contrôle précis et conviennent aux éléments qui nécessitent des tailles fixes, tels que les bordures, les images d'arrière-plan, etc.

Voici quelques exemples de code spécifiques montrant comment les unités relatives et absolues sont utilisées :

/* 使用相对单位百分比 */
.container {
  width: 80%;
  margin: 0 auto;
}

/* 使用相对单位em */
h1 {
  font-size: 2em;
}

/* 使用相对单位rem */
p {
  font-size: 1.5rem;
}

/* 使用绝对单位像素 */
.img {
  width: 300px;
  height: 200px;
}

/* 使用绝对单位点 */
.text {
  font-size: 12pt;
}

/* 使用绝对单位英寸 */
.box {
  width: 2in;
  height: 1in;
}

Grâce aux exemples de code ci-dessus, nous pouvons clairement voir la différence entre les unités relatives et absolues. L'utilisation d'unités relatives vous permet d'ajuster de manière adaptative le style d'un élément en fonction des modifications apportées à l'élément parent ou à la taille de la police, tandis que l'utilisation d'unités absolues vous permet d'avoir une taille fixe.

Pour résumer, les unités relatives conviennent aux conceptions réactives, tandis que les unités absolues conviennent aux éléments qui nécessitent des tailles fixes. Dans le développement réel, nous pouvons choisir les unités appropriées en fonction des différents besoins pour obtenir les meilleurs résultats.

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!