Les largeurs CSS respectent-elles les décimales : pourcentage par rapport aux pixels ?

Places décimales dans la largeur CSS : respectées ou arrondies ?

Lors de la création de conceptions CSS, vous vous demandez peut-être si les places décimales dans les largeurs CSS sont honorées ou arrondi. Le fait que le navigateur respecte ou ignore les décimales dépend du fait que vous utilisez des valeurs en pourcentage ou en pixels.

Largeurs en pourcentage

Pour les largeurs en pourcentage, les décimales sont pleinement respecté. Une largeur de 49,5% occupera 49,5% de l'espace disponible. Par exemple :

.percentage {
  width: 49.5%;
}

Largeurs des pixels

En revanche, les décimales pour les largeurs des pixels ne sont pas respectées. Ils sont toujours arrondis à l'entier le plus proche. Une largeur de 122,5 px deviendrait 123 px. Par exemple :

.pixel {
  width: 122.5px;
}

Pour illustrer la différence, considérons l'exemple suivant :

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

Ici, le premier bloc représente 50 % de l'espace disponible. Le deuxième bloc représente 50,5% de l'espace disponible. Mais comme les décimales ne sont pas respectées pour les largeurs de pixels, le résultat est arrondi à 51px. Le troisième bloc représente 51% de l'espace disponible, ce qui devient 102px.

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!