Eine ausführliche Analyse des mathematischen Ausdrucks calc() in CSS

【Empfohlenes Tutorial: CSS-Video-Tutorial】

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 berechne. Er ermöglicht die Verwendung von vier Operatoren +, -, *, / und kann mit %, px, em, rem und anderen Einheiten gemischt werden zur Berechnung.

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

Hinweis: Auf beiden Seiten der +- und --Operatoren müssen Leerzeichen stehen

Beispiele sind wie folgt:

<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 verwendet verschiedene Einheiten im Layout Zahlenoperationen

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

Weitere Kenntnisse zur Computerprogrammierung finden Sie unter: Programmier-Tutorial! !

Das obige ist der detaillierte Inhalt vonEine ausführliche Analyse des mathematischen Ausdrucks calc() in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!