Original link: http://caibaojian.com/calc.html
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, and width for an element.
Previously we could use Box-sizing:border-box to set the box's properties to no top margin. Now we have one more choice. But be aware that the two can only use one oh, otherwise it will cause conflict.
How to use
Calc () can solve problems using simple plus (+), minus (-), multiply (*), and divide (/) in mathematical operations, and can also convert calculations based on units such as Px,em,Rem, and percentages.
For example, the average distribution of three innings, the median spacing is 5 pixels.
Code from http://caibaojian.com/calc.html*{margin: 0; padding: 0;}.col-3{width: calc(100%/3 - 5px); float: left; margin-right: calc(5px*3 /2); background: #eee; color: #333; height: 100px; text-align: center; margin-bottom: calc(5px*3 /2); font-size: 18px; line-height: 100px;}.col-3:nth-child(3){margin-right: 0;}</style>
Demonstrate
Browser compatibility
Source: Front-end Development blog
CSS3 Calc () computed properties