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!
