Wie verwende ich Calc? Zusammenfassung der Verwendung der CSS3-Funktion calc()

Was bedeutet Calc? Wie benutzt man? Dieser Artikel bietet Ihnen eine Einführung in die Funktion calc() in CSS3, wofür sie verwendet wird und wie Sie sie verwenden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Was ist calc() in CSS3? Was kann getan werden?

calc()Wörtlich können wir es als Funktion verstehen. Tatsächlich ist calc die Abkürzung des englischen Wortes calcule; es handelt sich um eine neue Funktion von CSS3, mit der die Länge von Elementen angegeben und der Längenwert dynamisch berechnet werden kann. (Empfohlene Studie: CSS3-Handbuch)

Die Funktion calc() in CSS3 ermöglicht es uns, mathematische Operationen an Attributwerten durchzuführen.

Anstatt beispielsweise den Breitenwert des Elements als statischen Pixelwert zu deklarieren, können wir die Funktion calc() verwenden, um anzugeben, dass der Breitenwert das Ergebnis der Addition von zwei oder mehr Werten ist.

.demo {
    width: calc(100px + 50px);
}

Warum calc() verwenden?

Wenn Sie einen CSS-Präprozessor wie sass verwendet haben, sind Sie möglicherweise auf das folgende Beispiel gestoßen:

.demo{
    width: 100px + 50px;
}

// 使用SASS变量
$width-one: 100px;
$width-two: 50px;
.bar {
    width: $width-one + $width-two;
}

Die Funktion calc() bietet jedoch eine großartige Lösung dafür hat zwei Vorteile. Erstens können wir verschiedene Einheiten kombinieren. Insbesondere können wir verschiedene Einheiten für die Berechnung mischen, z. B. Prozentsatz, px, em, rem und andere Einheiten können gemischt werden. Wir können beispielsweise einen Ausdruck erstellen, der Pixelwerte von Prozentwerten subtrahiert.

.demo {
    width: calc(100% - 50px);
}

In diesem Beispiel beträgt die Breite des .demo-Elements immer weniger als 100 % der Breite seines übergeordneten Elements.

Zweitens ist der berechnete Wert nach der Verwendung von calc() der Ausdruck selbst, nicht der Ergebniswert des Ausdrucks. Wenn Sie also den CSS-Präprozessor zum Ausführen eines mathematischen Ausdrucks verwenden, ist der an den Browser übergebene Wert der Ergebniswert des Ausdrucks.

// 在SCSS中指定值
.demo {
    width: 100px + 50px;
}
// 浏览器中编译的CSS及其计算值
.demo {
    width: 150px;
}

Mit der calc()-Funktion ist der vom Browser analysierte Wert der eigentliche calc()-Ausdruck.

// 在CSS中指定值
.demo {
    width: calc(100% - 50px);
}
//浏览器的计算值
.demo {
    width: calc(100% - 50px);
}

Das bedeutet, dass die Werte im Browser dynamischer sein und sich ändern können, wenn sich die Ansicht ändert. Wir können ein Element (Wert: Ansichtshöhe minus Absolutwert) haben, das sich ändert, wenn sich die Ansicht ändert.

<code><span style="font-size: 20px;"><strong>calc()</strong></span>calc()

Verwendung der Funktion

calc Die Funktion () kann numerische Attributwerte verwenden, um Addition, Subtraktion, Multiplikation und Division, die vier arithmetischen Operationen, durchzuführen. Insbesondere kann es in Datentypen wie , , , , , verwendet werden.

Hier einige Beispiele:

.demo {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

Hinweis:

Bei der Verwendung von „+“ und „-“ müssen davor und danach Leerzeichen stehen, wie zum Beispiel „widht: calc(12 %+5em)“ ist falsch, ohne Leerzeichen zu schreiben;

Bei Verwendung von „*“ und „/“ dürfen davor und danach keine Leerzeichen stehen, es wird jedoch empfohlen, Leerzeichen zu lassen.

calc() verschachtelte Verwendung

calc()-Funktion kann verschachtelt werden. Allerdings werden innere Funktionen als einfache Klammerausdrücke behandelt. Beispielsweise ist der folgende verschachtelte Ausdruck:

.demo  {
    width: calc( 100% / calc(100px * 2) );
}

äquivalent zu:

.demo  {
    width: calc( 100% / (100px * 2) );
}

Nehmen wir ein einfaches Beispiel, um zu sehen, wie die calc()-Funktion verwendet wird.

Beispiel: Zentriert Element (vorausgesetzt, dass Höhe und Breite der .demo-Box beide 300 Pixel betragen)

.demo {    
     position: absolute    
     top: calc(50% - 150px);    
     left: calc(50% - 150px);
}

Dies entspricht:

.demo {    
     position: absolute;   
     top: 50%;    
     left: 50%;    
     marging-top: -150px;    
     margin-left: -150px;
}

Kompatibilität der calc()-Funktion

calc()

Man erkennt, dass die Unterstützung des Browsers für die

-Funktion recht gut ist.

Bei Browsern, die dies nicht unterstützen, ignoriert die Funktion calc() den gesamten Ausdruck. Das bedeutet, dass wir einen statischen Wert zur Verwendung durch Browser bereitstellen müssen, die ihn nicht unterstützen.

.demo{
width: 90%; /*非支持浏览器设置静态值*/
width: calc(100% - 50px);
}

Zusammenfassung: Die Funktion calc() ist in verschiedenen Situationen sehr nützlich. Sie können sie selbst ausprobieren, um Ihr Verständnis zu vertiefen.

Verwandte Empfehlungen:
1. PHP-Video-Tutorial für die chinesische Website:

CSS3-Tutorial

2. PHP-Spezialeffekte für die chinesische Website herunterladen:

CSS3-Spezialeffektcode

Das obige ist der detaillierte Inhalt vonWie verwende ich Calc? Zusammenfassung der Verwendung der CSS3-Funktion calc(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!