Can addition, subtraction, multiplication and division be done in css?

Can add, subtract, multiply and divide in css. In CSS, you can use the calc() function to perform the four arithmetic operations of "addition, subtraction, multiplication and division". It allows the use of four operators: " ", "-", "*", and "/", and you can use %, px, and em in combination. , rem and other units for calculation.

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

Can add, subtract, multiply and divide in css.

Mathematical expression calc() is a function in CSS, mainly used for mathematical operations. It allows the use of four operators, -, *, /, and can be mixed with %, px, em, rem and other units for calculation

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

Example:

<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>

For more programming-related knowledge, please visit:Programming Video! !

The above is the detailed content of Can addition, subtraction, multiplication and division be done in css?. For more information, please follow other related articles on the PHP Chinese website!