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

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

Barbara Streisand
Libérer: 2024-11-02 05:15:02
original
460 Les gens l'ont consulté

Why Is My CSS `calc()` Function Not Working?

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal