CSS calc()-Funktion
Beispiel
Verwenden Sie die Funktion calc(), um die Breite eines <div>-Elements zu berechnen:
Selbst ausprobieren »
Definition und Verwendung
Die calc()-Funktion wird verwendet, um Längenwerte dynamisch zu berechnen.
- Beachten Sie, dass vor und nach dem Operator ein Leerzeichen beibehalten werden muss, zum Beispiel:
width: calc(100% - 10px)； - Jeder Längenwert kann mit der calc()-Funktion berechnet werden;
- Die calc()-Funktion unterstützt die Operationen "+", "-", "*", "/";
- Die calc()-Funktion verwendet die standardmäßigen mathematischen Regeln zur Operatorrangfolge;
Unterstützte Versionen: CSS3
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversionsnummer an, die die Funktion unterstützt.
Die mit "webkit", "moz" oder "o" angegebenen Zahlen sind die ersten Versionsnummer-Präfixe, die die Funktion unterstützen.
| Funktion | |||||
|---|---|---|---|---|---|
| calc() | 26.0 19.0 -webkit- |
9.0 | 16.0 4.0 -moz- |
7.0 6.0 -webkit- |
15.0 |
CSS-Syntax
calc(expression)
| Wert | Beschreibung |
|---|---|
| expression | Erforderlich, ein mathematischer Ausdruck; das Ergebnis ist der zurückgegebene Wert nach der Auswertung. |
Formularfelder automatisch an die Größe ihres Containers anpassen.
calc()Ein weiterer Anwendungsfall besteht darin, sicherzustellen, dass die Größe eines Formularfelds in den aktuell verfügbaren Platz passt, ohne über den Rand seines Containers hinaus gequetscht zu werden, während angemessene Ränder beibehalten werden.
Im folgenden Beispiel verwendet das Formularelement selbst 1/6 der verfügbaren Breite des Fensters; dann verwenden wir calc() erneut, um die Breite der Eingabeelemente innerhalb des Formulars auf eine angemessene Größe festzulegen, und zwar auf die Breite des Containers minus 1em. Das Folgende...
Beispiel
Selbst ausprobieren »
Weitere Erweiterungen