Funkcje matematyczne w CSS
CSS obsługuje różne funkcje matematyczne, które można wykorzystać do wyboru wartości właściwości, wykonując niektóre obliczenia matematyczne. Podstawowym zastosowaniem funkcji matematycznych jest uzyskanie najwyższych lub najniższych wartości z wartości przekazywanych do funkcji określonej. Symbole matematyczne, takie jak -, +, /i * można zastosować do wielu wartości, aby uzyskać nową wartość dla tej właściwości. Ten post pokazuje użycie funkcji matematycznych w CSS. Zachowując konkretne rzeczy, ten przewodnik obsługuje poniżej wyniki:
- Jak używać funkcji calc () w CSS
- Jak używać funkcji min () w CSS
- Jak używać funkcji Max () w CSS
Funkcje matematyczne w CSS
Ta podstawowa część przewodnika zapewnia działanie i wykorzystanie różnych funkcji matematycznych w CSS. Każda funkcja matematyczna zostałaby szczegółowo opisana za pomocą przykładu
Jak używać funkcji calc ()
Calc () to funkcja matematyczna, która wykonuje pewne matematyczne obliczenia wartości, aby uzyskać nową wartość określonej właściwości.
calc (wyrażenie)wyrażenie W powyższej składni odnosi się do wyrażenia matematycznego (wartości połączone z +, -, * itd.).
Przykład
Kod podany poniżej praktykuje funkcję calc () na zestawie wartości, aby uzyskać nową wartość określonej właściwości.
Html
Funkcja calc () służy do ustawienia szerokości
CSS
Funkcja calc () jest stosowana na właściwości szerokości, która dodaje „300px” i „20%” Aby uzyskać nową wartość szerokości.
Wyjście
Wyjście pokazuje, że szerokość akapitu została rozszerzona na sumę „300px” i „20%”.
Jak używać funkcji min ()
Funkcja min () zwraca wartość minimalną, a wartość ta jest używana dla tej konkretnej właściwości CSS. Poniższa składnia jest używana przez funkcję Min ()
Min (Val1, Val2, Val3,…)Funkcja min () porównuje val1, val2 i val3, aby uzyskać minimalną wartość.
Przykład
W tym przykładzie używa funkcji min (.
Html
Funkcja min () służy do ustawienia wysokości/szerokości
Powyższy kod HTML zawiera akapit, który będzie używany w CSS do zastosowania funkcji min ().
CSS
Powyższy kod CSS używa funkcji min () na szerokości i wysokości elementu akapitu. Wartości szerokości są w „Procent (%)” i „cale (in)” podczas gdy wartości wysokości są w „PT” i „PX”.
Wyjście
Z wyjścia obserwuje się, że funkcja min () ustawiła wysokość na „50pt” i szerokość do „4 cali” ponieważ były to wartości minimalne.
Jak używać funkcji Max ()
Max () porównuje wiele wartości i wybiera maksymalną wartość z wartości wejściowych. Składnia funkcji max () podano poniżej:
Max (Val1, Val2, Val3,…)VAL1, VAL2 i VAL3 odnoszą się do wartości przekazywanych do funkcji MAX ().
Przykład
Poniższy kod praktykuje funkcję matematyczną Max () w CSS.
Html
Funkcja max () służy do ustawiania wyściółki i krycia
CSS
W powyższym CSS wyściółka, krycie i szerokość są używane z funkcją Max (). Po porównaniu wartości funkcja max () wybierze „10pt” dla wyściółki, „50%” dla krycia i szerokości.
Wyjście
Wyjście pokazuje, że funkcja max () wybrała maksymalne wartości krycia, szerokości i wyściółki.
Wniosek
Funkcje matematyczne w CSS są używane do wyboru lub generowania wartości dla określonej właściwości CSS. Funkcja calc () wykonuje wyrażenie matematyczne na zbiorze wartości i generuje nową wartość. W przeciwieństwie do tego, funkcje min () i max () wybierają odpowiednio wartości minimalne i maksymalne (z wartości wejściowych). Ten artykuł zawiera użycie funkcji matematycznych w CSS. Te funkcje matematyczne pomagają w wyborze różnych wartości dla różnych scenariuszy.