Heim >Web-Frontend >CSS-Tutorial >Können Addition, Subtraktion, Multiplikation und Division in CSS durchgeführt werden?

Können Addition, Subtraktion, Multiplikation und Division in CSS durchgeführt werden?

青灯夜游
青灯夜游Original
2021-02-22 16:30:204520Durchsuche

Addition, Subtraktion, Multiplikation und Division können in CSS durchgeführt werden. In CSS können Sie mit der Funktion calc() die vier Rechenoperationen „Addition, Subtraktion, Multiplikation und Division“ ausführen. Sie ermöglicht die Verwendung der vier Operatoren „+“, „-“, „*“ und „/“. . Sie können % px verwenden. Zur Berechnung werden Einheiten wie em und rem verwendet.

Können Addition, Subtraktion, Multiplikation und Division in CSS durchgeführt werden?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

Addition, Subtraktion, Multiplikation und Division können in CSS durchgeführt werden.

Mathematischer Ausdruck calc() ist eine Funktion in CSS, die hauptsächlich für mathematische Operationen verwendet wird. Es ermöglicht die Verwendung von vier Operatoren +, -, *, / und kann Einheiten wie %, px, em, rem usw. mischen und für die Berechnung verwenden

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

Beispiel:

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

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonKönnen Addition, Subtraktion, Multiplikation und Division in CSS durchgeführt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn