Matematikkfunksjoner i CSS

CSS støtter forskjellige matematikkfunksjoner som kan brukes til å velge en eiendomsverdi ved å gjøre noen matematiske beregninger. Den primære bruken av matematikkfunksjoner er å få de høyeste eller laveste verdiene fra verdiene som sendes til den spesifikke funksjonen. Matematiske symboler som -, +, /og * kan brukes på flere verdier for å få en ny verdi for den egenskapen. Dette innlegget demonstrerer bruken av matematikkfunksjoner i CSS. Når du holder ting spesifikt, serverer denne guiden de under-uttalte resultatene:

1. Hvordan bruke Calc () -funksjonen i CSS
2. Hvordan bruke Min () -funksjonen i CSS
3. Hvordan bruke maks () -funksjonen i CSS

Matematikkfunksjoner i CSS

Denne kjernedelen av guiden gir arbeid og bruk av forskjellige matematikkfunksjoner i CSS. Hver mattefunksjon vil bli beskrevet i detalj ved hjelp av et eksempel

Hvordan bruke Calc () -funksjonen

Calc () er en matematikkfunksjon som utfører en viss matematisk beregning på verdiene for å få en ny verdi av den spesifikke egenskapen.

De uttrykk I syntaks ovenfor refererer til det matematiske uttrykket (verdier sammen med +, -, * osv.).

Eksempel

Koden gitt nedenfor praktiserer Calc () -funksjonen på et sett med verdier for å få en ny verdi av den spesifikke egenskapen.

Html

Calc () -funksjonen brukes til å stille bredden

CSS

Calc () -funksjonen brukes på breddeegenskapen som legger til “300px” og “20%” For å få den nye breddeverdien.

Produksjon

Utgangen viser at bredden på avsnittet er utvidet til summen av “300px” og “20%”.

Hvordan bruke Min () -funksjonen

Min () -funksjonen returnerer minimumsverdien, og den verdien brukes til den spesifikke CSS -egenskapen. Følgende syntaks brukes av Min () -funksjonen

Min () -funksjonen sammenligner VAL1, VAL2 og VAL3 for å få minimumsverdien.

Eksempel

Dette eksemplet bruker Min () -funksjonen for å få minimumsverdien blant den beståtte.

Html

Min () -funksjonen brukes til å stille inn høyden/bredden

Ovennevnte HTML -kode inneholder et avsnitt som vil bli brukt i CSS for å anvende Min () -funksjonen.

CSS

Ovennevnte CSS -kode bruker Min () -funksjonen på bredden og høyden på avsnittselementet. Verdiene for bredden er i “Prosent (%)” og “inches (in)” mens verdiene for høyden er i “PT” og “PX”.

Produksjon

Fra utgangen observeres det at min () -funksjonen har satt høyden til “50pt” og bredde til “4inch” ettersom de var minimumsverdiene.

Hvordan bruke maks () -funksjonen

Maks () sammenligner flere verdier og velger maksimal verdi fra inngangsverdiene. Syntaksen til maks () -funksjonen er gitt nedenfor:

VAL1, VAL2 og VAL3 refererer til verdiene som sendes til Max () -funksjonen.

Eksempel

Følgende kode praktiserer Max () matematikkfunksjonen i CSS.

Html

Maksimal () -funksjonen brukes til å angi polstring og opacitet

CSS

I ovennevnte CSS brukes polstring, opacitet og bredde med max () -funksjonen. Etter å ha sammenlignet verdiene, vil maks () -funksjonen velge "10pt" for polstring, "50%" for opacitet og bredde.

Produksjon

Utgangen viser at maks () -funksjonen har valgt de maksimale verdiene for opacitet, bredde og polstring.

Konklusjon

Matematikkfunksjoner i CSS brukes til å velge eller generere en verdi for en spesifikk CSS -egenskap. Calc () -funksjonen utfører et matematisk uttrykk på verdiene og genererer en ny verdi. I motsetning til dette, velger Min () og Max () funksjoner henholdsvis minimums- og maksimumsverdier (fra inngangsverdier). Denne artikkelen gir bruken av mattefunksjonene i CSS. Disse matematikkfunksjonene hjelper til med å velge de forskjellige verdiene for forskjellige scenarier.