Understand the mathematical expression calc () in CSS

Define

The mathematical expression calc () is an abbreviation for calculate calculation. It allows the use of +, -, * and / operators, and can be calculated in a mixture of%, px, em, rem and other units.

Compatibility: IE8-, safari5.1-, ios5.1-, android4.3- are not supported, and android4.4-4.4.4 only supports addition and subtraction. IE9 is not supported for backround-position

[note] there must be spaces on both sides of the + and-operators

The operations in .test1 {border: calc (1px+1px) solid black; / * calc follow the order of *, / precedence over +,-/ width: calc (100% pink; font-style 3-2*1em-2*1px); background-color: pink; font-style: toggle (italic, normal);} .test2 {/ * because there is no space on the left and right sides of the operator +, it fails * / border: calc (1px+1px) solid black / * for attribute values that cannot be less than 0, if the result is less than 0, press 0 to process * / width: calc (10px-20px); padding-left: 10px; background-color: lightblue;}

Test text one test text two applications

The mathematical expression calc () is often used for numeric operations of different units in layout.

P {margin: 0;} .parent {overflow: hidden;zoom: 1;} .left {float: left;width: 100px; Margaret right: 20px;} .right {float: left;width: calc (100%-120px);}

Left

Right

Right