Funkcje Matematyczne CSS

CSS matematyczne funkcje pozwalają używać wyrażeń matematycznych jako wartości atrybutów. W tym rozdziale omówimy calc(),max() i min() Funkcja.

Funkcja calc()

calc() Funkcja wykonuje obliczenia i używa wyniku jako wartości atrybutu.

Gramatyka CSS

calc(expression)
Wartość Opis
expression Wymagane. Wyrażenie matematyczne. Wynik zostanie użyty jako wartość. Można użyć następujących operatorów: +, -, *, /

Oto przykład:

Przykład

Użycie calc() Oblicz szerokość elementu <div>:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

Spróbuj sam

Funkcja max()

max() Funkcja używa największej wartości z listy wartości oddzielonych przecinkami jako wartości atrybutu.

Gramatyka CSS

max(value1, value2, ...)
Wartość Opis
value1, value2, ... Wymagane. Lista wartości oddzielonych przecinkami - wybierz największą wartość.

Oto przykład:

Przykład

Użycie max() Ustaw szerokość #div1 na 50% lub większą wartość z 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

Spróbuj sam

Funkcja min()

min() Funkcja używa najmniejszej wartości z listy wartości oddzielonych przecinkami jako wartości atrybutu.

Gramatyka CSS

min(value1, value2, ...)
Wartość Opis
value1, value2, ... Wymagane. Lista wartości oddzielonych przecinkami - wybór najmniejszej wartości

Oto przykład:

Przykład

Użycie min() Ustaw szerokość #div1 na 50% lub mniejszą z 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

Spróbuj sam

Podręcznik funkcji CSS

Aby uzyskać pełną listę wszystkich funkcji CSS, odwiedź naszą Podręcznik funkcji CSS.