You are on page 1of 6

aayush-jain-code

Math()
Function
In CSS
aayush-jain-code

math functions ?
CSS math functions are one of the powerful
features of CSS. They are special CSS values
that enable front-end developers to perform
mathematical calculations and basic arithmetic
directly within their CSS stylesheets.

The math functions


available in CSS are as
follows:
calc()
clamp()
max()
min()
abs()
aayush-jain-code

Combine values
using calc()
The CSS calc() function lets us perform
basic arithmetic—addition (+),
subtraction (-), division (/), and
multiplication (*) on numbers and CSS
length units.

It takes a single mathematical expression


as its parameter, computes the value,
and returns the result as a single value.
aayush-jain-code

Restrict numerical
values with clamp()
The CSS clamp() function lets us define a range
of possible values for a CSS property. These
values are evaluated and applied as the width
and height of the viewport change.

The clamp() function accepts three comma-


separated expressions as its parameters. The
first is the minimum or lowest value of the range,
the middle is the preferred value, and the third is
the maximum value of the range.
aayush-jain-code

Get the larger/smaller of two


numbers with max()/min()
There are two limitations shared by all the methods above:
The exact location of the modal window is determined
by the browser. Usually, it’s in the center.
The exact look of the window also depends on the
browser. We can’t modify it.

There are other ways to show nicer windows and richer


interaction with the visitor, but if “bells and whistles” do
not matter much, these methods work just fine.
aayush-jain-code

Get the absolute value of an


expression with abs()
The last of the math functions and much less known, abs().
The abs() function takes a single expression as its
argument and returns the absolute value of that
expression (i.e., the value of the expression without regard
to its sign).

You might also like