Mathematikfunktionen in CSS
CSS unterstützt verschiedene mathematische Funktionen. Die primäre Verwendung von Mathematikfunktionen besteht darin, die höchsten oder niedrigsten Werte aus den an die spezifischen Funktion übergebenen Werten zu erhalten. Mathematische Symbole wie -, +, /und * können auf mehrere Werte angewendet werden, um einen neuen Wert für diese Eigenschaft zu erhalten. Dieser Beitrag zeigt die Verwendung von Mathematikfunktionen in CSS. In diesem Leitfaden dient dieser Leitfaden die folgenden Ergebnisse:
- So verwenden Sie die Funktion calc () in CSS
- So verwenden Sie die min () -Funktion in CSS
- So verwenden Sie die MAX () -Funktion in CSS
Mathematikfunktionen in CSS
Dieser Kernteil des Leitfadens bietet die Arbeit und Verwendung verschiedener Mathematikfunktionen in CSS. Jede Mathematikfunktion würde mit Hilfe eines Beispiels ausführlich beschrieben
So verwenden Sie die Funktion calc ()
Die Calc () ist eine Mathematikfunktion, die eine mathematische Berechnung der Werte ausführt, um einen neuen Wert der spezifischen Eigenschaft zu erhalten.
Berechnung (Ausdruck)Der Ausdruck In der obigen Syntax bezieht sich der mathematische Ausdruck (Werte mit +, -, * usw.).
Beispiel
Der nachstehend angegebene Code übt die Funktion Calc () auf einer Reihe von Werten aus, um einen neuen Wert der spezifischen Eigenschaft zu erhalten.
Html
Die Funktion calc () wird verwendet, um die Breite einzustellen
CSS
Die Funktion calc () wird auf die Waffeneigenschaft angewendet, die hinzugefügt wird "300px" und "20%" Um den neuen Breitenwert zu erhalten.
Ausgang
Die Ausgabe zeigt, dass die Breite des Absatzes auf die Summe von ausgedehnt wurde "300px" und "20%".
So verwenden Sie die min () -Funktion
Die Funktion min () gibt den Mindestwert zurück, und dieser Wert wird für diese spezifische CSS -Eigenschaft verwendet. Die folgende Syntax wird von der min () -Funktion verwendet
min (Val1, Val2, Val3,…)Die min () -Funktion vergleicht Val1, Val2 und Val3, um den Mindestwert zu erhalten.
Beispiel
In diesem Beispiel wird die Funktion min () verwendet, um den Mindestwert unter den übergebenen zu erhalten.
Html
Die min () -Funktion wird verwendet, um die Höhe/Breite einzustellen
Der obige HTML -Code enthält einen Absatz, der in CSS verwendet wird, um die min () -Funktion anzuwenden.
CSS
Der obige CSS -Code verwendet die min () -Funktion auf der Breite und Höhe des Absatzelements. Die Werte für die Breite sind in "Prozentsatz (%)" und "Zoll (in)" " Während die Werte für die Höhe in sind "Pt" und "PX".
Ausgang
Aus dem Ausgang wird beobachtet, dass die min () -Funktion die Höhe auf die Höhe gesetzt hat "50pt" und Breite zu "4inch" Da waren die Mindestwerte.
So verwenden Sie die MAX () -Funktion
Der max () vergleicht mehrere Werte und wählt den Maximalwert aus den Eingabewerten aus. Die Syntax der MAX () -Funktion ist unten bereitgestellt:
Max (Val1, Val2, Val3,…)Das Val1, Val2 und Val3 beziehen sich auf die Werte, die an die MAX () -Funktion übergeben werden.
Beispiel
Der folgende Code übt die MAX () -Mathematikfunktion in CSS aus.
Html
Die MAX () -Funktion wird verwendet, um die Polsterung und Deckkraft zu setzen
CSS
In der obigen CSS werden die Polsterung, die Opazität und die Breite mit der MAX () -Funktion verwendet. Nach dem Vergleich der Werte wählt die Funktion max () die „10PT“ für die Polsterung aus, „50%“ für Deckkraft und Breite.
Ausgang
Die Ausgabe zeigt, dass die MAX () -Funktion die maximalen Werte von Deckkraft, Breite und Polsterung gewählt hat.
Abschluss
Mathematikfunktionen in CSS werden verwendet, um einen Wert für eine bestimmte CSS -Eigenschaft auszuwählen oder zu generieren. Die Funktion calc () führt einen mathematischen Ausdruck auf der Wertesatz aus und generiert einen neuen Wert. Im Gegensatz dazu wählen die Funktionen min () und max () die minimalen und maximalen Werte (aus Eingangswerten). Dieser Artikel bietet die Verwendung der Mathematikfunktionen in CSS. Diese mathematischen Funktionen helfen bei der Auswahl der verschiedenen Werte für verschiedene Szenarien.