CSS/Funktionen/calc()
Aus SELFHTML-Wiki
< CSS | Funktionen
Die calc()-Funktion ermöglicht es Berechnungen durchzuführen, deren Ergebnis dann als CSS-Wert einer Eigenschaft zugewiesen wird.
Parameter |
Einziger Parameter ist eine mathematische Berechnung. |
---|---|
anwendbar auf | alle Längenangaben, Prozentwerte, Winkelmaße, Zeitangaben <frequency>, <number>, or <integer> kann überall dort verwendet werden, wo eine Eigenschaft ein Maß erwartet |
Browsersupport | caniuse: calc |
Beispiel
min-height: calc(100px + 5em);
width: calc(100% - 2 * 3px); width: calc(100% / 3);
min-width: calc((80% + 4px) / 2 ) );Beachten Sie: Die Berechnungen, die diese Funktion durchführen kann, unterliegen drei Beschränkungen:
- Addition und Subtraktion sind nur zwischen zwei Maßen möglich,
- die Multiplikation ist nur zwischen einem Maß und einer Zahl möglich,
- Division ist nur möglich, wenn ein Maß durch eine Zahl geteilt wird.
Erfolgt eine Division durch null oder ergibt die Berechnung ein Maß, das die Eigenschaft nicht erlaubt (beispielsweise negative Maße für width
), so wird die Eigenschaft ignoriert.
Weblinks
- W3C: Mathematical Expressions: calc()
- MDN: calc()
Siehe auch
Beachten Sie: Die Browser rechnen intern mit Integer-Werten anstatt „echten“ Pixeln (, die es im Gewirr zwischen physikalischen und logischen Pixeln gar nicht gibt). Deshalb kann es zu geringfügigen Rundungsfehlern kommen.
- Self-Forum: calc() rechnet falsch? vom 26.09.2017
- Programmiertechnik/Rechnerarithmetik
Liste der CSS-Funktionen
- Berechnungen und Vergleiche
- Farben und Verläufe
- intrinsische Abmessungen
- Transformationen