Deep understanding of the mathematical expression calc() in CSS


The mathematical expression calc() is a function in CSS, which is mainly used for mathematical operations. Using Calc () provides convenience and new ideas for page element layout. This article will introduce the related content of calc()


The mathematical expression Calc () is the abbreviation of calculate calculation. It allows the use of the four operators +, -, *, / and can be mixed with%, PX, EM, REM and other units for calculation

Compatibility: IE8 -, Safari 5.1 -, ios5.1 -, android4.3 – are not supported, and Android 4.4-4.4.4 only supports addition and subtraction. IE9 does not support backround position

Note: there must be white space on both sides of the + and – operators

    border: calc( 1px + 1px ) solid black;
    /*The operations in Calc follow the order of *, / prior to +, -*/
    width: calc(100%/3 - 2*1em - 2*1px);
    background-color: pink;
    font-style: toggle(italic, normal); 
    /*The operator + is invalid because there are no white spaces on the left and right sides*/
    border: calc(1px+1px) solid black;
    /*For the attribute value that cannot be less than 0, when the operation result is less than 0, it is treated as 0*/
    width: calc(10px - 20px);
    padding-left: 10px;
    background-color: lightblue;
< div class = "test1" > Test Text 1 < / div >    
< div class = "test2" > test text 2 < / div >


The mathematical expression Calc () is often used for numerical operations on different units in a layout

p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{float: left;width: 100px;margin-right: 20px;}    
.right{float: left;width: calc(100% - 120px);}
<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
    <div class="right"  style="background-color: lightgreen;">


The above is the mathematical expression Calc () in CSS introduced by Xiaobian. I hope it will be helpful to you. If you have any questions, please leave me a message, and the editor will reply you in time. Thank you very much for your support to the developeppaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!