Calc () and css3calc () in css3 ()

Calc () and css3calc () in css3 ()
1. What is calc ()?
Calc is the abbreviation of the English word calculate (calculation). It is a new feature of css3 to specify the length of an element. For example, you can use calc () to set dynamic values for attributes such as border, margin, pading, font-size, and width of an element. The biggest benefit of calc () is that it is used in the Fluid layout and can be calculated using calc () to obtain the width of the element.
2. What can calc () do?
Calc () allows you to calculate the elements. You can calculate the width or height of a div element based on the percentage, em, px, and rem unit values. For example, "width: calc (50% + 2em) ", so you don't have to consider the actual width of the element div, but leave this annoying task to the browser for calculation.
3. calc () syntax
The calc () syntax is very simple. It is represented by mathematical expressions like adding (+), subtraction (-), multiplication (*), and Division (/) when we were a child:

.elm {  width: calc(expression);}

"Expression" is an expression used to calculate the length.
4. calc () calculation rules
Calc () uses general mathematical calculation rules, but also provides more intelligent functions:
Use four arithmetic operations: "+", "-", "*", and;
Units such as percentage, px, em, and rem can be used;
Various units can be used for calculation;
When the expressions contain "+" and "-", spaces must exist before and after the expressions, such as "widht: calc (12% + 5em;

When the expression contains "*" and "/", there can be no spaces before and after it, but it is recommended to leave spaces.

5. browser compatibility

The browser has good compatibility with calc (), and is well supported in IE9 +, FF4.0 +, Chrome19 +, and Safari6 +, we also need to add the identifiers of various browser vendors to the front of the browser, but unfortunately, the mobile browser does not only support "firefox for android 14.0", and the rest are not supported.
In actual use, you also need to add the browser prefix.

 .elm {  /*Firefox*/  -moz-calc(expression);  /*chrome safari*/  -webkit-calc(expression);  /*Standard */  calc(expression); }