Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

CSS: Funkcja calc()

wtorek,

CSS: Funkcja calc()

Funkcja calc() w CSS jest potężnym narzędziem, które pozwala na wykonywanie obliczeń arytmetycznych bezpośrednio w kodzie CSS. Można ją wykorzystać do dynamicznego obliczania wartości różnych właściwości, takich jak szerokość, wysokość, marginesy, wypełnienie itp., co uwalnia od potrzeby polegania wyłącznie na jednostkach statycznych lub procentowych.

Przykłady zastosowania funkcji calc()

Podstawowy przykład

.element {
  width: calc(100% - 20px);
}

W tym przykładzie szerokość elementu zostanie obliczona jako 100% szerokości kontenera rodzica minus 20 pikseli.

Złożone obliczenia

.element {
  margin: calc(10px + 5%) calc(20px + 3%);
}

Tutaj, górny i dolny margines elementu zostaną obliczone jako 10 pikseli plus 5% szerokości kontenera, a lewy i prawy margines jako 20 pikseli plus 3% szerokości kontenera.

Łączenie różnych jednostek

.element {
  font-size: calc(1rem + 2vw);
}

Rozmiar czcionki elementu zostanie obliczony jako suma 1 rem (rozmiar bazowy czcionki dokumentu) i 2 vw (2% szerokości obszaru wyświetlania).

Przykład ze zmienną CSS

:root {
  --main-spacing: 10px;
}

.element {
  margin: calc(var(--main-spacing) * 3);
}

Margines elementu zostanie obliczony jako trzykrotność wartości zmiennej --main-spacing.

Uwagi

  • calc() pozwala na mieszanie jednostek, co jest szczególnie przydatne w responsywnym designie.
  • Należy pamiętać o zachowaniu spacji wokół operatorów (+, -, *, /), ponieważ są one wymagane dla prawidłowego działania funkcji.
  • calc() może być używana wszędzie tam, gdzie są używane wartości liczbowe w CSS.
Artykuł: Pierwszy dzień w Splicie

Pierwszy dzień w Splicie

Artykuł: OpenSolaris

OpenSolaris

Artykuł: Bob Frankston

Bob Frankston

Artykuł: Staże w Chorwacji

Staże w Chorwacji

Artykuł: 3Com

3Com

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły