Calc in CSS3 ()

What is calc ()?

Calc is an abbreviation of the English word Calculate (calculation), is a new function of CSS3;

The interpretation of MDN can be used in any length, value, time, angle, frequency, etc.;

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

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

But it is important to note that the +-must be separated by a space;

/**/

/* when +-   */

When using the */operator, a value must be guaranteed to be a numeric type;

If the operation is wrong, the result is 0;

Browser support level:

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

Some small examples:

can also be combined with

You can also use parentheses to raise the priority of operations

Calc () is still relatively used, for example, to center an absolutely positioned element, generally left:50%;top:50%; but is it really centered? This approach does not take into account the width and height of the element. Using calc () can be used to achieve the center of JS

Below are some references:

Https://developer.mozilla.org/en/docs/Web/CSS/calc

Http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

Calc in CSS3 ()