Une analyse approfondie de l'expression mathématique calc() en CSS

[Tutoriel recommandé : Tutoriel vidéo 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 +, -, *, /. peut mélanger %, px, em, rem et d'autres unités pour le calcul

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

Remarque : Il doit y avoir des espaces des deux côtés des opérateurs + et -

. Les exemples sont les suivants :

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

Pour plus de connaissances liées à la programmation informatique, veuillez visiter : Programmation Enseigner! !

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!