Heim >Web-Frontend >CSS-Tutorial >Warum funktioniert meine calc()-Funktion nicht?

Warum funktioniert meine calc()-Funktion nicht?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-02 10:32:30422Durchsuche

Why Isn't My calc() Function Working?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn