English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS reference manual

CSS @rules (RULES)

Comprehensive list of CSS properties

Die CSS-Funktion calc()

Die CSS-Funktion calc() ermöglicht Ihnen, Berechnungen durchzuführen, wenn Sie CSS-Werte angeben. Sie kann in folgenden Fällen verwendet werden: <length>, <frequency>, <angle>, <time>, <number> oder <integer>.

CSS Funktion

Online-Beispiel

Verwenden Sie die calc()-Funktion, um die Breite des <div>-Elements zu berechnen:

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>　
<style>
#div1　{
　　　　position: fest;
　　　　links:　50px;
　　　　breite: calc(100%　-　100px);
　　　　rand:　1px fest schwarz;
　　　　hintergrund-farbe: yellow;
　　　　ausfüllen:　5px;
　　　　text-ausrichten: center;
}
</style>
</head>
<body>
<p>Erstellen Sie einen div, der die gesamte Bildschirmbreite überspannt, und div auf beiden Seiten hat　50px Abstand:</p>
<div id="div1">Einige Texte...</div>
</body>
</html>
Testen Sie es heraus ‹/›

Definition und Verwendung

Die calc()-Funktion wird zur dynamischen Berechnung von Längenwerten verwendet.

  • Zu beachten ist, dass sowohl vor als auch nach dem Operator ein Leerzeichen beibehalten werden muss, z.B.:width: calc(100% - 10px);

  • Jeglicher Längenwert kann mit der calc()-Funktion berechnet werden;

  • calc()-Funktion unterstützt "+", "-", "*", "/" Operationen;

  • Die calc()-Funktion verwendet die Standardregeln der mathematischen Operationen Prioritätsregeln;

Unterstützte Versionen: CSS3

Browser-Kompatibilität

Die Zahlen in der Tabelle stellen die erste Browserversionsnummer dar, die die Funktion unterstützt.

"webkit" oder "moz" oder "o" bestimmte Nummer ist das Präfix der ersten Versionsnummer, die die Funktion unterstützt.

Funktion




calc()26.0
19.0　-webkit-		9.016.0
4.0　-moz-		7.0
6.0　-webkit-		15.0

CSS Syntax

calc(expression)
WertBeschreibung
expressionNotwendig, ein mathematischer Ausdruck, dessen Wert der Rückgabewert nach der Operation ist.
Diese calc()-Funktion nimmt einen Ausdruck als Parameter und verwendet den Wert dieses Ausdrucks als Wert. Dieser Ausdruck kann eine Kombination aus beliebigen folgenden Operatoren sein, eine einfache Ausdruck, die nach den Standardregeln der Operatorbehandlung bearbeitet wird. Beispiel: width: calc(100% - 80px);

CSS Funktion

CSS @charset-RegelCSS-Funktionen (Functions)