Css3 calc can calculate the width using simple mathematical operations, css3calc

Css3 calc can calculate the width using simple mathematical operations, css3calc

Calc is the abbreviation of the word calculate. It is a new length unit function of css3. it can be used for simple mathematical operations.

Firefox uses the-moz-calc () private attribute,

Chrome uses the-webkit-calc () private attribute,

IE9 native supports standard writing without a prefix,

Opera is not supported yet.

Operation Rules

You can use the "+"-"" * ""/"Four arithmetic operations (" + "and"-"must have spaces on the sides of the two symbols, the "*" and "/" symbols are not mandatory ),

You can use percentages, px, em, rem, and other units,

You can use multiple units for calculation.

. Content {border: 1px solid #000;/* '+'-'sign with spaces on both sides */width: calc (100%-2px );}. content2 {/* '+ ''-' sign with spaces on both sides */width: calc (10em + 10px);}/* three-column wide Layout */. content3 {margin-left: 20px;/* '+'-'Signs plus spaces on both sides,' * '/' symbol does not add */width: calc (100%/3-20px);}/* n is the multiplier starting from 0, increasing by 1 in sequence, for example, 3*1, the child element after the result is multiplied by 3*2 */. content3: nth-child (3n) {margin-left: 0 ;}