CSS3 Calc ()

What is calc ()?

Calc () is a new feature of CSS3 that can dynamically calculate length values, and any length value can be computed using calc (). 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 don't have to think about how much the element div's width value is, and leave this annoying task to the browser to calculate.

(It should be noted that the operators should keep spaces before and after use, although * and/these operators do not need to preserve spaces, but it is best to add them to the habit.) ）

Grammar

In addition to the mobile browser, most browsers currently have good compatibility with Calc (), but they still need to prefix them before, for example:

Compatibility use

In Calc (), we can mix absolute units with relative units, such as:

Combined with the usage relative to absolute cells

When using Calc (), the computed value is the result of the expression itself, rather than the expression, when a mathematical operation is done using the CSS preprocessor, the given value is the result of an expression.

Then the browser resolves the value of calc () to the real Calc () expression

We can use Calc () to achieve vertical centering of elements

The typical solution is to use a negative margin to move one half of the height and width of the distance.

In fact, Calc () has a lot of practical uses, just to give an example, welcome to add

CSS3 Calc ()