CSS3 Calc () calculation Properties Detailed description

As its name, Calc is the new computed attribute in CSS3, which allows many attributes to add an expression to the argument;

Calc is an abbreviation for the English word Calculate (calculation) and is a new feature of CSS3, and you can use Calc () to set dynamic values for attributes such as border, margin, pading, font-size, width, and height of the element.

How to use

Calc () can use simple plus (+), minus (-), multiply (*), and divide (/) in math to solve problems, and can also convert calculations based on units such as Px,em,rem and percentages.
The standard notation:

  . class{/       *         area:expression;       *       /Width:calc ();       Padding:calc ();       Margin-top:calc ();       ...   }

Compatibility

Basic theory

1. Calc can be used to set dynamic values for any property with size, such as border, margin, pading, font-size, and width.

2. Supported operating units: REM, em, percentage, px

3. Compute precedence and math consistency

Note the point:

Calc internal expression, when using the operation symbol, two times must add a space (although multiplication can be ignored, but it is recommended)!!!!! , or it will parse the error!! , look at the presentation.

    Width:calc (Ten * 10px);    Width:calc (50%-50px);    Width:calc (50% + 5em);    Width:calc (10%/1rem);

Small Demo

Just as a demonstration, responsive scaling

Code

<!     DOCTYPE html>
Summarize

Calac and Flexbox collocation, used to write flow layout is very good;