Detaillierte Einführung in den mathematischen Ausdruck calc() in CSS

Der mathematische Ausdruck calc() ist eine Funktion in CSS, die hauptsächlich für mathematische Operationen verwendet wird. Die Verwendung von calc() bietet Komfort und neue Ideen für das Layout von Seitenelementen.

Definition

Der mathematische Ausdruck calc() ist die Abkürzung für calcule. Er ermöglicht die Verwendung von vier Operatoren +, -, *, / und kann mit %, px, em gemischt werden , Rem und andere Einheiten werden berechnet

Kompatibilität: IE8-, Safari5.1-, ios5.1-, Android4.3- werden nicht unterstützt, Android4.4-4.4.4 unterstützt nur Addition und Subtraktion. IE9 unterstützt keine Hintergrundposition

(empfohlenes Tutorial: CSS-Tutorial )

Hinweis: Auf beiden Seiten von + und – müssen Leerzeichen stehen. Operatoren

Das Beispiel sieht wie folgt aus:

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

Anwendung

Der mathematische Ausdruck calc() wird häufig für numerische Operationen in verschiedenen Einheiten im Layout verwendet

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

Ähnliche Videos Tutorial-Empfehlung: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in den mathematischen Ausdruck calc() in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!