Detailed introduction to mathematical expression calc() in css

Mathematical expression calc() is a function in CSS, mainly used for mathematical operations. Using calc() provides convenience and new ideas for page element layout.

Definition

The mathematical expression calc() is the abbreviation of calculate. It allows the use of four operators, -, *, /, and can be mixed with %, px, em, and rem. Calculate with other units

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

(recommended tutorial: CSS tutorial)

Note: There must be whitespace characters on both sides of the and-operator

Examples are as follows:

<style>
.test1{
    border: calc( 1px + 1px ) solid black;
    /* calc里面的运算遵循*、/优先于+、-的顺序 */
    width: calc(100%/3 - 2*1em - 2*1px);
    background-color: pink;
    font-style: toggle(italic, normal); 
}
.test2{
    /* 由于运算符+的左右两侧没有空白符，所以失效 */
    border: calc(1px+1px) solid black;
    /* 对于，不能小于0的属性值，当运算结果小于0时，按0处理 */
    width: calc(10px - 20px);
    padding-left: 10px;
    background-color: lightblue;
}
</style>
<div class="test1">测试文字一</div>    
<div class="test2">测试文字二</div>

Application

Mathematical expression calc() is often used for numerical 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>

Related video tutorials Recommended: css video tutorial

The above is the detailed content of Detailed introduction to mathematical expression calc() in css. For more information, please follow other related articles on the PHP Chinese website!