A calc() CSS függvény

A calc() egy beépített CSS függvény, amelyet olyan tulajdonságok értékének kiszámítására használunk, mint a szélesség (width), magasság (height), margók (margin), kitöltések (padding), vagy akár a betűméret (font-size).

A függvény lehetővé teszi, hogy különböző egységeket (pl. px, %, em, rem) kombináljunk, miközben matematikai műveleteket hajtunk végre.

Szintaxisa: tulajdonság: calc(kifejezés);

A kifejezés: Egy matematikai egyenlet, amely összeadást (+), kivonást (-), szorzást (*) és osztást (/) tartalmazhat.

Példa:

width: calc(100% - 50px);

Ez azt jelenti, hogy a szélesség a szülőelem teljes szélességének 100%-a mínusz 50px.

Műveletek a calc() használatával:

Összeadás:

height: calc(50px + 10%);

Ez azt jelenti, hogy a magasság 50px plusz a szülőelem magasságának 10%-a.

Kivonás:

width: calc(100% - 120px);

A szélesség a szülőelem teljes szélességének 100%-a mínusz 120px.

Szorzás:

font-size: calc(1rem * 1.5);

A betűméret 1.5-szerese az alap betűméretnek.

Osztás:

width: calc(100% / 3);

A szélesség a szülőelem szélességének harmada.

A calc() egy rendkívül hasznos eszköz a CSS-ben, amely megoldást nyújt bonyolult méretezési problémákra, és megkönnyíti a reszponzív tervezést. Használata egyszerű, mégis lehetővé teszi komplex elrendezések létrehozását anélkül, hogy extra JavaScript-re lenne szükség.