L'addition, la soustraction, la multiplication et la division peuvent-elles être effectuées en CSS ?

L'addition, la soustraction, la multiplication et la division peuvent être effectuées en CSS. En CSS, vous pouvez utiliser la fonction calc() pour effectuer les quatre opérations arithmétiques « addition, soustraction, multiplication et division ». Elle permet l'utilisation de quatre opérateurs : « + », « - », « * » et « / ». ". Vous pouvez utiliser %, px, des unités telles que em et rem sont utilisées pour le calcul.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.

L'addition, la soustraction, la multiplication et la division peuvent être effectuées en CSS.

L'expression mathématique calc() est une fonction en CSS, principalement utilisée pour les opérations mathématiques. Il permet d'utiliser quatre opérateurs +, -, *, /, et peut mélanger des calculs avec des unités telles que %, px, em, rem

Compatibilité : IE8-, safari5.1-, ios5.1 - , android4.3- ne prend pas en charge, android4.4-4.4.4 ne prend en charge que l'addition et la soustraction. IE9 ne prend pas en charge la position arrière-plan

Exemple :

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

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!