Quelles sont les unités de taille du CSS ?

Il existe de nombreux types d'unités de taille en CSS, et chaque unité a ses scénarios et ses utilisations applicables. Ce qui suit présentera en détail les unités de taille CSS couramment utilisées et fournira des exemples de code correspondants.

1. Pixels (px)
   Les pixels sont l'une des unités de taille les plus couramment utilisées. Il est mesuré par rapport aux pixels physiques de l'écran et a une taille fixe. Lors de l'écriture de styles CSS, vous pouvez utiliser directement les pixels comme valeurs pour des attributs tels que la largeur, la hauteur, les bordures et les marges intérieures et extérieures. Par exemple :

   div {
     width: 200px;
     height: 100px;
     border: 1px solid #000;
     padding: 10px;
     margin: 20px;
   }

2. Pourcentage (%)
   Pourcentage est une unité de mesure relative à la taille de l'élément parent. Il peut être utilisé pour des attributs tels que la largeur, la hauteur, les marges intérieures et extérieures et les bordures. En définissant le pourcentage, vous pouvez obtenir une mise en page réactive. Par exemple :

   div {
     width: 50%;
     height: 50%;
   }

3. em
   em est une unité de mesure relative à la taille de la police de l'élément actuel. Si la taille de la police n'est pas définie explicitement, la taille en unités em est égale à la taille de la police de l'élément parent. Il peut être utilisé pour des attributs tels que la largeur, la hauteur, les marges intérieures et extérieures et les bordures. Par exemple :

   div {
     width: 2em;
     height: 2em;
     padding: 1em;
     border: 0.5em solid #000;
   }

4. rem
   rem est une unité de mesure relative à la taille de la police de l'élément racine (c'est-à-dire l'élément html). Il peut être utilisé pour des attributs tels que la largeur, la hauteur, les marges intérieures et extérieures et les bordures. Le contrôle global de la taille peut être obtenu en définissant la taille de la police de l'élément racine. Par exemple :

   html {
     font-size: 16px; /* 设置根元素的字体大小为16px */
   }
   div {
     width: 20rem;
     height: 10rem;
     padding: 4rem;
     border: 2rem solid #000;
   }

5. vw et vh
   vw est le pourcentage de la largeur de la fenêtre et vh est le pourcentage de la hauteur de la fenêtre. Ils sont mesurés par rapport aux dimensions de la fenêtre du navigateur. Ils peuvent être utilisés pour des propriétés telles que la largeur, la hauteur, etc. En définissant vw et vh, une mise en page réactive peut être obtenue. Par exemple :

   div {
     width: 50vw; /* 视口宽度的50% */
     height: 50vh; /* 视口高度的50% */
   }

Résumé :
Cet article présente les unités de taille couramment utilisées en CSS, notamment les pixels, les pourcentages, em, rem, vw et vh. Une sélection et une utilisation raisonnables des unités de taille peuvent rendre les pages Web adaptables et réactives. Dans le développement réel, la sélection des unités appropriées à configurer en fonction de besoins et de scénarios spécifiques peut rendre la mise en page de la page plus flexible et plus belle.

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!