Calc in CSS3 ()

1. What is calc ()?
Calc is an abbreviation for the English word Calculate (calculation) and is a new feature of CSS3. Used to specify 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 advantage of Calc () is the use of fluid layouts. The width of the element can be calculated by Calc ().
What can 2.calc () do?
Calc () allows you to calculate the elements. You can calculate the width or height of a DIV element using percentages, EM, px, and REM unit values. Let's say "Width:calc (50% + 2em)", so you don't have to think about how much the width of the element div is, but leave this annoying task to the browser to calculate.
3.calc () syntax
The Calc () syntax is easy. Just like when we were kids, we learned to add (+), subtract (-), multiply (*), divide (/), and use mathematical expressions to represent:

. Elm {  width:calc (expression);}

where "expression" is an expression 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 be used in percentages, px, EM, REM and other units.
Able to mix and use various units for calculation;
There are "+" and "-" in the expression. There must be a space before and after it, such as "Widht:calc (12%+5em)" such as no space is wrong.

When there are "*" and "/" in the expression, there is no space before or after it, but it is recommended to leave a space.

5. Browser compatibility

The browser to calc () compatibility is good, in ie9+, ff4.0+, chrome19+, safari6+ are better supported, the same need to be in front of each browser manufacturer's identifier, but unfortunately, the mobile browser has not only "Firefox for Android 14.0 "Support, others are annihilated.
Everyone in the actual use. Same prefix that needs to be added to the browser

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

Calc in CSS3 ()