CSS3 Calc () computed properties

CSS3 Calc () computed properties

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 of the 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.

*{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;}

Browser compatibility

CSS3 Calc () computed properties