Comment les décimales sont-elles gérées dans les largeurs CSS (pourcentage par rapport aux pixels) ?

Précision décimale dans les largeurs CSS

En CSS, les largeurs peuvent être spécifiées en utilisant des pourcentages, des pixels ou d'autres unités. Lorsque vous travaillez avec des fractions décimales en largeurs, une question courante se pose : les décimales sont-elles respectées ?

Considérez les déclarations CSS suivantes :

.percentage {
  width: 49.5%;
}

.pixel {
  width: 122.5px;
}

Pourcentage de largeurs

Dans le cas de largeurs en pourcentage, les décimales sont en effet respectées. Cela signifie que les éléments d'une largeur de "49,5%" occuperont exactement la moitié de leur conteneur parent. Cette précision est cruciale pour des mises en page précises et cohérentes, en particulier lorsqu'il s'agit de largeurs fractionnaires.

#outer {
    width: 200px;
}

#first {
    width: 50%;
    height: 20px;
    background-color: red;
}

#second {
    width: 50.5%;
    height: 20px;
    background-color:green;
}

#third {
    width: 51%;
    height: 20px;
    background-color:blue;
}

Dans cet exemple, le "premier" div occupe exactement la moitié de la largeur du div "extérieur", le "second" div occupe 50,5 % et la "troisième" div occupe 51 %.

Pixel Largeurs

Cependant, lors de l'utilisation des largeurs de pixels, les valeurs fractionnaires sont tronquées à l'entier le plus proche. Cela signifie qu'une largeur de "122,5px" sera rendue comme "122px" dans la plupart des navigateurs. En effet, les valeurs de pixels représentent des points discrets et il n'y a pas de mappage direct pour les valeurs fractionnaires.

En résumé, les décimales dans les largeurs en pourcentage sont respectées, offrant un contrôle précis sur la taille des éléments. Cependant, les largeurs de pixels tronquent les valeurs fractionnaires à l’entier le plus proche. Comprendre cette distinction est crucial pour des conceptions CSS précises et cohérentes.

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!