Warum funktioniert meine CSS-Funktion „calc()“ nicht?

Warum funktioniert die CSS-Funktion calc() nicht?

Bei der Verwendung der CSS-Funktion calc() können Probleme auftreten, insbesondere wenn versucht, Ausdrücke zu subtrahieren, die px-Einheiten enthalten. Dies kann durch ein häufiges Versehen verursacht werden: Vergessen, Leerzeichen zwischen Operatoren einzufügen.

Reparieren der Notation:

Um dieses Problem zu beheben, stellen Sie sicher, dass Leerzeichen als Trennzeichen vorhanden sind Operatoren in Ihren calc()-Ausdrücken. Verwenden Sie beispielsweise anstelle von calc(100vw/4-(10px-4)) calc(100vw/4 - (10px - 4)).

Verschachtelte Berechnungen:

Mit der Funktion calc() können Sie Berechnungen in Klammern verschachteln, wie im Beispiel gezeigt unten:

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

Dynamische Berechnungen verwalten:

In SASS-Schleifen können Sie x in calc(100vw/x-(10px-x)) dynamisch ersetzen mit folgender Ansatz:

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

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine CSS-Funktion „calc()“ nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!