Tiefgreifendes Verständnis mathematischer Ausdrücke in CSS calc()

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 Seitenelement-Layout. Dieser Artikel stellt den relevanten Inhalt von calc() vor

Definition

Der mathematische Ausdruck calc() ist die Abkürzung für calculate und erlaubt die Verwendung von vier Operatoren: +, -, *, / und kann mit Einheiten wie %, px, em, rem usw. zur Berechnung gemischt werden.

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

Hinweis: Die Operatoren „+“ und „-“ müssen mit Leerzeichen umgeben sein.

<Stil>
.test1{
    Rand: calc(1px + 1px) durchgehend schwarz;
    /* Die Operationen in calc folgen der Reihenfolge * und / und haben Vorrang vor + und -*/
    Breite: berechnet (100 %/3 – 2 * 1em – 2 * 1px);
    Hintergrundfarbe: rosa;
    Schriftstil: Umschalten (kursiv, normal); 
}
.test2{
    /* Da sich links und rechts des +-Operators keine Leerzeichen befinden, ist er ungültig*/
    Rand: calc(1px+1px) durchgehend schwarz;
    /* Bei Attributwerten, die nicht kleiner als 0 sein können, wird das Berechnungsergebnis, wenn es kleiner als 0 ist, als 0 behandelt*/
    Breite: berechnet (10px – 20px);
    Polsterung links: 10px;
    Hintergrundfarbe: hellblau;
}
</Stil>
<div class="test1">Testtext 1</div>    
<div class="test2">Testtext 2</div>

Anwendung

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

<Stil>
p{Rand: 0;}
.parent{Überlauf: versteckt;Zoom: 1;}
.left{float: left;Breite: 100px;Rand rechts: 20px;}    
.rechts{float: links;Breite: calc(100% - 120px);}
</Stil>
<div Klasse="übergeordnet" Stil="Hintergrundfarbe: hellgrau;">
    <div Klasse="links" Stil="Hintergrundfarbe: hellblau;">
        <p>links</p>
    </div>
    <div Klasse="rechts" Stil="Hintergrundfarbe: hellgrün;">
        <p>richtig</p>
        <p>richtig</p>
    </div>
</div>

Zusammenfassen

Oben ist die Einführung des mathematischen Ausdrucks calc() in CSS. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!