1. What is calc()?
Calc is the abbreviation of the English word calculate. It is a new function of CSS3 and is used to specify the length of elements. For example, you can use calc() to set dynamic values for the border, margin, padding, font-size, and width properties of an element. The biggest benefit of calc() is that it can be used in fluid layout. The width of the element can be calculated through calc().
2.What can calc() do?
calc() allows you to calculate the width or height of a div element using percentage, em, px and rem unit values, such as "width:calc(50 % 2em)", so that you don't have to consider the width value of the element div, and leave this annoying task to the browser to calculate.
3.calc() syntax
The calc() syntax is very simple, just like when we learned addition ( ), subtraction (-), multiplication (*), and division (/) when we were young, Use mathematical expressions to represent:
.elm { width: calc(expression);}
When there are "*" and "/" in the expression, there must be spaces before and after There can be no spaces, but it is recommended to leave spaces.
5. Browser compatibility
Browser compatibility with calc() is pretty good, and is well supported in IE9, FF4.0, Chrome19, and Safari6 , it is also necessary to add the identifier of each browser manufacturer in front of it, but unfortunately, the mobile browser does not yet have "firefox for android 14.0" support, and the rest are completely wiped out..elm { /*Firefox*/ -moz-calc(expression); /*chrome safari*/ -webkit-calc(expression); /*Standard */ calc(expression); }