Maison  >  Article  >  interface Web  >  Pourquoi ma fonction CSS calc() ne fonctionne-t-elle pas ?

Pourquoi ma fonction CSS calc() ne fonctionne-t-elle pas ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-01 00:12:02443parcourir

Why Is My CSS calc() Function Not Working?

Dépannage de la fonction CSS calc()

La fonction calc() en CSS est un outil puissant pour effectuer des calculs sur des valeurs. Cependant, il arrive parfois qu’il fonctionne mal à cause d’oublis ou de malentendus. Un problème courant est celui d'un espacement incorrect.

Le besoin d'espacement

Les opérateurs dans les expressions calc() doivent être séparés par des espaces. Négliger cette règle peut conduire à une analyse incorrecte, comme le démontrent les exemples fournis :

calc(100vw/4-(10-4))  // Incorrect (no space after '-')
calc(100vw/4-(10px-4))  // Incorrect (no space after 'px')
calc(100vw/4-(10px-4px)) // Incorrect (no space before and after '-', no space between 'px')

Pour résoudre ce problème, introduisez simplement des espaces comme suit :

calc(100vw/4 - (10 - 4))
calc(100vw/4 - (10px - 4)) // Optionally, space before 'px' for consistency

Expressions imbriquées

Les fonctions calc() peuvent être imbriquées les unes dans les autres, agissant comme de simples parenthèses. Cependant, il est important de suivre les mêmes règles d'espacement pour les expressions imbriquées. Par exemple :

calc(100vw/4 - calc(10px - 4px)) // Outer and inner expressions spaced correctly

Travailler avec des variables

Dans les boucles SASS, les variables peuvent être remplacées dans les expressions calc(). Pour garantir des calculs corrects, assurez-vous que la variable est correctement placée entre parenthèses et que les opérateurs ont un espacement approprié. Par exemple, pour gérer l'expression calc(100vw/x-(10px-x)) où x est remplacé dans une boucle SASS :

calc(100vw / ($x) - (10px - $x)) // Spaces around operators, parentheses around variable

En suivant ces règles, vous pouvez efficacement dépanner et manipuler le calcul () dans votre code CSS. N'oubliez pas d'ajouter des espaces entre les opérateurs, d'imbriquer soigneusement les expressions et d'utiliser des parenthèses pour les variables dans calc().

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn