Calc in CSS3 ()

1. What is calc ()?
Calc is an abbreviation for the English word Calculate (calculation) and is a new feature of CSS3 that specifies the length of the element. For example, you can use Calc () to set dynamic values for attributes such as border, margin, pading, font-size, and width for an element. The biggest benefit of Calc () is that the width of the element can be calculated by Calc () using the fluid layout.
what can 2.calc () do?
Calc () allows you to calculate the elements, you can give a DIV element, using percentages, EM, px and REM unit values to calculate its width or height, such as "Width:calc (50% + 2em)", so you do not have to consider the element div width value is exactly how much, And this annoying task to the browser to calculate.
3.calc () syntax
The Calc () syntax is very simple, as we learned to add (+), subtract (-), multiply (*), and (/) as a child, using mathematical expressions to represent:

. Elm {  width:calc (expression);}

where "expression" is an expression that is used to calculate the length of an expression.
arithmetic rules for 4.calc ()
Calc () uses common mathematical rules, but it also provides more intelligent functionality:
Use "+", "-", "*" and "/" arithmetic;
can use percentages, px, EM, REM and other units;
Can be mixed with various units for calculation;
When there are "+" and "-" in the expression, there must be a space before and after it, such as "Widht:calc (12%+5em)", which is not the correct way to make a blank;

When there are "*" and "/" in an expression, there can be no spaces before or after it, but it is recommended that you leave a space.

5. Browser compatibility

The browser to calc () compatibility is good, in ie9+, ff4.0+, chrome19+, safari6+ are better supported, the same needs to be preceded by the browser manufacturer's identifier, but unfortunately, the mobile browser has not only "Firefox for Android 14.0 "Support, others are annihilated.
You also need to add a browser prefix when you are actually using it.

. Elm {  /*firefox*/  -moz-calc (expression);  /*chrome safari*/  -webkit-calc (expression);  /*standard *  /calc (expression);}

Calc in CSS3 ()