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

Pourquoi la fonction CSS calc() ne fonctionne pas ?

Vous pouvez rencontrer des problèmes lors de l'utilisation de la fonction CSS calc(), en particulier lorsque tenter de soustraire des expressions contenant des unités px. Cela peut être dû à un oubli courant : oublier d'inclure des espaces blancs entre les opérateurs.

Correction de la notation :

Pour résoudre ce problème, assurez-vous qu'il y a des espaces séparant opérateurs dans vos expressions calc(). Par exemple, au lieu de calc(100vw/4-(10px-4)), utilisez calc(100vw/4 - (10px - 4)).

Calculs imbriqués :

La fonction calc() vous permet d'imbriquer les calculs entre parenthèses, comme le montre l'exemple ci-dessous :

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

Gérer les calculs dynamiques :

Dans SASS boucles, vous pouvez remplacer dynamiquement x dans calc(100vw/x-(10px-x)) en utilisant l'approche suivante :

<code class="sass">@for $i from 1 through 4 {
  .item-#{$i} {
    width: calc(100vw/#{$i} - (10px - #{$i}));
  }
}</code>

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!