Ein Beispiel für die Berechnungsfunktion calc in CSS im Website-Layout

calc ist eine Funktion in CSS, die zum Berechnen numerischer Werte verwendet wird. Es kann Länge, Winkel, Zeit usw. berechnen. Unterstützt + , - , * , / und Klammern. Bei der Verwendung ist zu beachten, dass vor und nach dem Plus- und Minuszeichen ein Leerzeichen stehen muss . calc erhöht die Flexibilität von CSS erheblich. Bietet Komfort für einige spezielle Layouts.

Die Wirkung der Beispielanzeige

Ein Beispiel für die Verwendung des cacl-Layouts

Ich möchte einen Effekt erzeugen, bei dem sich der Hintergrund von #div1 bis zum sichtbaren Bereich von #div2 erstreckt und in #div2 feste 60 Pixel angezeigt werden. Das heißt, die Breite des schwarzen Rahmens beträgt 60 Pixel. Unabhängig von der Breite von #div1 .

CSS Code

#div1 {
    Breite: 100 %;
    Mindestbreite: 400px;
    Umriss: blau;
}
#div2 {
    Breite: 300px;
    Rand: 0 automatisch;
    Umriss: 1px durchgezogen #ccc;
    Farbe: weiß;
}

HTML Quelltext

<div id="div1" class="cw">
    <div id="div2">
        prüfen
    </div>
</div>

Lösung

.cw {
    Hintergrund: blauer linearer Farbverlauf(
    nach rechts, rot calc(50% - 150px + 60px ) ,
    transparente Berechnung (50 % – 150 px + 60 px)
    );
}

CACL-Kompatibilität

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.