Heim >Web-Frontend >CSS-Tutorial >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!