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

Malheurs de la fonction Calc() : pourquoi elle ne fonctionne pas

Votre fonction calc(100vw/4) fonctionne comme prévu, mais les autres ne le sont pas à cause d'un élément crucial : les espaces.

La fonction CSS calc() nécessite des espaces entre ses opérateurs. Les erreurs courantes incluent l'omission de ces espaces, ce qui entraîne des expressions non valides.

Par exemple, l'expression calc(100vw/4-(10-4)) n'est pas valide en raison de l'espace manquant entre "-" et les parenthèses. Au lieu de cela, cela devrait être : calc(100vw/4 - (10 - 4)).

Fonctions Calc() imbriquées

Vous pouvez imbriquer les fonctions calc() comme plusieurs fois selon les besoins, mais cela fonctionne de la même manière que les parenthèses. Par exemple :

<code class="css">calc(100vw/4 - calc(10px - 4px))</code>

Est équivalent à :

<code class="css">calc(100vw/4 - (10px - 4px))</code>

Exemple

Voici un exemple de fonction calc() imbriquée :

<code class="css">.one {
  width: calc(100% - 150px);
  margin-top: calc(20px + calc(40px * 2));
  height: calc(100px - 10px);
  padding: calc(5% + 10px) calc(5% - 5px);
}</code>

Dans cet exemple, la propriété margin-top utilise une fonction calc() imbriquée pour ajouter 20px au résultat de la multiplication de 40px par 2.

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!