Siirry sisältöön

CSS Calc Playground

Testaa ja esikatsele CSS calc() -lausekkeita reaaliajassa. Kokeile sekayksiköitä kuten px, %, rem, vw. Näe laskettu tulos livenä. Kopioi CSS-koodi. Ilmainen verkkotyökalu.

320px 2560px
Esimerkit
Esikatselu
CSS-tuloste
 

Mikä on CSS calc()?

CSS-funktio calc() mahdollistaa laskutoimitusten suorittamisen CSS-ominaisuusarvoja määritettäessä. Se on erityisen hyödyllinen eri yksiköiden, kuten prosenttien ja pikselien, sekoittamiseen.

Tuetut yksiköt

Voit sekoittaa kaikkia CSS-pituusyksiköitä calc()-funktion sisällä: px, %, em, rem, vw, vh, vmin, vmax ja muita. Operaattorit +, -, *, / ovat tuettuja.

Yleisiä kaavoja

calc(100% - 2rem) — täysi leveys miinus kiinteä täyte. calc(100vh - 80px) — näkymän korkeus miinus otsikko. calc(50% + 1rem) — puolikas leveys plus siirtymä. calc(100% / 3) — kolmannes säiliöstä.

Tietosuoja

Kaikki calc()-testaus tapahtuu 100 % selaimessasi. Mitään tietoja ei lähetetä palvelimelle.