In-depth understanding of mathematical expressions in CSS calc()

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

definition

The mathematical expression calc() is the abbreviation of calculate, which allows the use of four operators: +, -, *, /, and can be mixed with units such as %, px, em, rem, etc. for calculation

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

Note: There must be spaces around the + and - operators.

<style>
.test1{
    border: calc( 1px + 1px ) solid black;
    /* The operations in calc follow the order of * and / taking precedence over + and -*/
    width: calc(100%/3 - 2*1em - 2*1px);
    background-color: pink;
    font-style: toggle(italic, normal); 
}
.test2{
    /* Since there are no spaces on the left and right sides of the + operator, it is invalid*/
    border: calc(1px+1px) solid black;
    /* For attribute values ​​that cannot be less than 0, when the calculation result is less than 0, it is treated as 0*/
    width: calc(10px - 20px);
    padding-left: 10px;
    background-color: lightblue;
}
</style>
<div class="test1">Test text 1</div>    
<div class="test2">Test text 2</div>

application

The mathematical expression calc() is often used for digital operations in different units in layout

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

Summarize

The above is the introduction of the mathematical expression calc() in CSS. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!