Introduction détaillée à l'expression mathématique calc() en CSS

L'expression mathématique calc() est une fonction en CSS, principalement utilisée pour les opérations mathématiques. L'utilisation de calc() offre une commodité et de nouvelles idées pour la disposition des éléments de page.

Définition

L'expression mathématique calc() est l'abréviation de calculate Elle permet l'utilisation de quatre opérateurs +, -, *, /, et peut être mélangée avec %, px, em. , Rem et d'autres unités sont calculées

Compatibilité : IE8-, safari5.1-, ios5.1-, android4.3- ne sont pas pris 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 d'arrière-plan

(tutoriel recommandé : Tutoriel CSS )

Remarque : il doit y avoir des caractères d'espacement des deux côtés du + et du - opérateurs

L'exemple est le suivant :

<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

L'expression mathématique calc() est souvent utilisée pour les opérations numériques dans différentes unités de la mise en page

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

Vidéos associées Recommandation du didacticiel : tutoriel vidéo CSS

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!