Was ist calc() in CSS3? Wie verwende ich calc()?

Viele Leute wissen nicht, was calc() ist, also lernen wir heute calc(). Bevor wir lernen, müssen wir wissen, Was ist calc()? Nur wenn Sie wissen, was er ist? Nur in praktischen Anwendungen können wir es besser nutzen. Dann dreht sich der nächste Schritt um calc().

Was ist calc()?

calc() Im wahrsten Sinne des Wortes können wir es als Funktion Funktion verstehen. Tatsächlich ist calc die Abkürzung des englischen Wortes calcule. Es handelt sich um eine neue Funktion von CSS3 und wird zur Angabe der Länge von Elementen verwendet. Sie können beispielsweise calc() verwenden, um dynamische Werte für die Eigenschaften „Rahmen“, „Rand“, „Abstand“, „Schriftgröße“ und „Breite“ eines Elements festzulegen. Warum wird es als dynamischer Wert bezeichnet, weil wir Ausdrücke verwenden, um den Wert zu erhalten? Der größte Vorteil von calc() besteht jedoch darin, dass es im Fluid-Layout verwendet werden kann. Die Breite des Elements kann über calc() berechnet werden.

Was kann calc() tun?

calc() ermöglicht es Ihnen, die Breite oder Höhe eines div-Elements mithilfe von Prozent-, em-, px- und rem-Einheitswerten zu berechnen, wie zum Beispiel „width: calc(50% + 2em)“, also dass Sie den Breitenwert des Elements DIV nicht berücksichtigen müssen und die Berechnung dieser lästigen Aufgabe dem Browser überlassen müssen.

calc()-Syntax

calc()-Syntax ist sehr einfach, genau wie wir als Kinder Addition (+), Subtraktion (-), Multiplikation ( *) und Division (/) verwenden mathematische Ausdrücke, um Folgendes auszudrücken:

.elm {
  width: calc(expression);
}

wobei „Ausdruck“ ein Ausdruck ist, der zur Berechnung der Länge verwendet wird.

Operationsregeln von calc()

calc() verwendet allgemeine mathematische Operationsregeln, bietet aber auch intelligentere Funktionen:
1. Verwenden Sie „+“, „. -“, „*“ und „/“ vier arithmetische Operationen;
2. Sie können Einheiten wie Prozentsatz, px, em, rem usw. verwenden;
3. Sie können verschiedene Einheiten für die Berechnung mischen;
4. Wenn der Ausdruck „+“ und „-“ enthält, müssen davor und danach Leerzeichen stehen. Beispielsweise ist es falsch, „widht: calc(12%+5em)“ ohne Leerzeichen zu schreiben > 5. Ausdruck Wenn die Formel „*“ und „/“ enthält, dürfen davor und danach keine Leerzeichen stehen, es wird jedoch empfohlen, Leerzeichen zu lassen.

Browserkompatibilität

Die Kompatibilität des Browsers mit calc() ist ziemlich gut und in IE9+, FF4.0+, Chrome19+ und Safari6+ besser. Gute Unterstützung, Sie müssen auch die Kennung jedes Browserherstellers davor hinzufügen, aber leider unterstützt der mobile Browser noch nicht „Firefox für Android 14.0“ und der Rest ist gelöscht.

Bei der tatsächlichen Verwendung müssen Sie auch das Browser-Präfix hinzufügen

 .elm {
    /*Firefox*/
    -moz-calc(expression);
    /*chrome safari*/
    -webkit-calc(expression);
    /*Standard */
    calc();
 }

.box {
    background: #f60;
    height: 50px;
    padding: 10px;
    border: 5px solid green;
width: 90%;/*写给不支持calc()的浏览器*/
    width:-moz-calc(100% - (10px + 5px) * 2);
    width:-webkit-calc(100% - (10px + 5px) * 2);
    width: calc(100% - (10px + 5px) * 2);
}

Es ist zu beachten, dass in der Berechnungsfunktion auf beiden Seiten des Operators ein Leerzeichen reserviert werden muss, andernfalls funktioniert die Funktion nicht werde einen Fehler melden.

Das obige ist der detaillierte Inhalt vonWas ist calc() in CSS3? Wie verwende ich calc()?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!