An in-depth analysis of the mathematical expression calc() in CSS

[Recommended tutorial: CSS video tutorial]

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.

Definition

The mathematical expression calc() is the abbreviation of calculate. It allows the use of four operators, -, * and /. Mixed use of %, px, em, rem and other units for calculation

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

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

The example is 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

The mathematical expression calc() is often used for numerical operations in different units in the 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>

For more computer programming related knowledge, please visit: Programming Teaching! !

The above is the detailed content of An in-depth analysis of the mathematical expression calc() in CSS. For more information, please follow other related articles on the PHP Chinese website!