Warum funktioniert meine calc()-Funktion nicht?

Probleme mit der Funktion „Calc()“: Warum sie nicht funktioniert

Ihre Funktion „calc(100vw/4)“ funktioniert wie erwartet, die anderen jedoch Dies liegt nicht an einem entscheidenden Element: Leerzeichen.

Die CSS-Funktion calc() erfordert Leerzeichen zwischen ihren Operatoren. Häufige Fehler sind das Weglassen dieser Leerzeichen, was zu ungültigen Ausdrücken führt.

Zum Beispiel ist der Ausdruck calc(100vw/4-(10-4)) ungültig, weil zwischen „-“ und den Klammern ein Leerzeichen fehlt. Stattdessen sollte es lauten: calc(100vw/4 - (10 - 4)).

Verschachtelte Calc()-Funktionen

Sie können calc()-Funktionen verschachteln als mehrmals nach Bedarf, funktioniert aber genauso wie Klammern. Zum Beispiel:

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

Entspricht:

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

Beispiel

Hier ist ein Beispiel einer verschachtelten calc()-Funktion:

<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>

In diesem Beispiel verwendet die Eigenschaft „margin-top“ eine verschachtelte calc()-Funktion, um 20 Pixel zum Ergebnis der Multiplikation von 40 Pixel mit 2 hinzuzufügen.

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