Les largeurs CSS respectent-elles les décimales ?

Places décimales dans les largeurs CSS : sont-elles respectées ?

La précision des places décimales dans les largeurs CSS a été un sujet de curiosité pour de nombreux passionnés de CSS. Cet article vise à fournir une explication complète sur la prise en compte des décimales dans les déclarations de largeur CSS.

Largeurs en pourcentage : les décimales comptent

Dans le cas des largeurs en pourcentage, les décimales comptent effectivement jouent un rôle important. Par exemple, si un élément se voit attribuer une largeur de 49,5 %, il occupera exactement 49,5 % de la largeur de l'élément qui le contient. Cela signifie que des pourcentages fractionnaires, tels que 50,5 %, peuvent être utilisés pour créer un espacement ou un alignement précis.

Largeurs des pixels : les décimales sont ignorées

En revanche, les décimales ne sont pas respectées pour largeurs de pixels. Lorsqu'une largeur de pixel est attribuée à un élément, le navigateur arrondit au pixel entier inférieur le plus proche. Par exemple, une largeur de 122,5px sera interprétée comme 122px par le navigateur. En effet, les valeurs de pixels représentent des dimensions physiques spécifiques à l'écran et les valeurs fractionnaires ne sont pas prises en charge.

Démonstration avec un exemple

L'extrait de code suivant fournit une démonstration visuelle de la façon dont les décimales sont gérées. différemment en pourcentage et en largeurs de pixels :

#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;
}

<div>

Dans cet exemple, le conteneur extérieur a une largeur fixe de 200 px. Les trois éléments intérieurs se voient attribuer respectivement des largeurs de 50 %, 50,5 % et 51 %. Comme vous pouvez le voir sur le résultat, le deuxième élément, avec une largeur de 50,5 %, occupe le bon espace fractionnaire à l'intérieur du conteneur.

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!