Calc in CSS3 ()

What is calc ()?

Calc is an abbreviation of the English word calculate (computed) and is a new function of CSS3;

MDN can be used in any length, value, time, angle, frequency, etc.

/* PROPERTY:CALC (expression) * * Width:calc (100%-80px);

You can use the +-*/symbol to do the operation;

But note that the +-must be separated by a space;

Width:calc (100% -8px); * * This will be an error, the result is 0 * *

Width:calc (100%-8px); /* when +-  symbol separated by a space, operation success

When you use the */operator, you must ensure that a value is a numeric type;

If the operation error, the result is 0;

Browser support level:

ie9+,ff4.0+,chrome19+,safari6+;

Some small examples:

You can also use a combination of

You can also use parentheses to elevate the operation precedence

Calc () is used, for example, to center an absolutely positioned element, usually left:50%;top:50%; but is that really centered? This method does not count the width of the element. Using calc () can be used to achieve the center with JS