Was nützt CSS calc()?

css calc() wird verwendet, um den Längenwert dynamisch zu berechnen. Mit dieser Funktion können wir mathematische Operationen an Attributwerten wie „.foo {width: calc(100px + 50px);}“ durchführen Angabe eines Der feste Pixelwert der Elementbreite ist die Summe mehrerer Werte.

Empfohlen: „css-Video-Tutorial“

css3s calc()-Funktion wird zur dynamischen Berechnung des Längenwerts verwendet. Mit der Funktion

calc() können wir mathematische Operationen an Attributwerten durchführen. Beispielsweise können wir mit calc() einen festen Pixelwert für die Breite eines Elements als Summe mehrerer Werte angeben.

.foo {  width: calc(100px + 50px);
}

Hinweis:

• Es ist zu beachten, dass vor und nach dem Operator ein Leerzeichen reserviert werden muss, zum Beispiel: width: calc(100% - 10px);

• Jeder Längenwert kann mit verarbeitet werden Die Funktion calc() unterstützt die Operationen „+“, „-“, „*“ und „/“. Die Funktion calc() verwendet Standardregeln für die Priorität von mathematischen Operationen

• Warum calc()

Wenn Sie einen CSS-Präprozessor wie SASS verwendet haben, sind Sie möglicherweise auf das obige Beispiel gestoßen

• .foo {
      width: 100px + 50px;
  }
  $width-one: 100px;
  $width-two: 50px;
  .bar {
      width: $width-one + $width-two;
  }

  Die Funktion calc() bietet jedoch eine bessere Lösung. Erstens sind wir in der Lage, verschiedene Einheiten zu kombinieren. Insbesondere können wir Berechnungen mit absoluten Einheiten (wie Prozentsätzen und Ansichtsfenstereinheiten) und relativen Einheiten (wie Pixel) mischen. Beispielsweise können wir einen Ausdruck erstellen, der einen Pixelwert von einem Prozentsatz subtrahiert.

  .foo {    width: calc(100% - 50px);
  }

In diesem Beispiel ist das .foo-Element immer 50 Pixel kleiner als die Breite seines übergeordneten Elements.

Zweitens ist bei Verwendung von calc() der berechnete Wert der Ausdruck selbst, nicht das Ergebnis des Ausdrucks. Bei mathematischen Operationen mit dem CSS-Präprozessor ist der angegebene Wert das Ergebnis des Ausdrucks.

.foo {    width: 100px + 50px;
}.foo {    width: 150px;
}

Der Browser analysiert jedoch den Wert von calc() als echten calc()-Ausdruck.

.foo {    width: calc(100% - 50px);
}.foo {    width: calc(100% - 50px);
}

Das bedeutet, dass Werte im Browser flexibler sein und auf Änderungen im Ansichtsfenster reagieren können. Wir können eine Höhe für das Element festlegen, die der Höhe des Ansichtsfensters minus einem absoluten Wert entspricht, und sie wird angepasst, wenn sich das Ansichtsfenster ändert.

Verwenden Sie calc()

calc()-Funktion kann verwendet werden, um vier arithmetische Operationen für numerische Attribute auszuführen. Beispielsweise sind die Datentypen , , ,

Hier einige Beispiele:

.foo {    width: calc(50vmax + 3rem);    padding: calc(1vw + 1em);    transform: rotate( calc(1turn + 28deg) );    background: hsl(100, calc(3 * 20%), 40%);    font-size: calc(50vw / 3);
}

clac() verschachtelt

calc()-Funktionen können verschachtelt sein. Innerhalb einer Funktion wird er als einfacher Klammerausdruck behandelt, wie im folgenden Beispiel gezeigt. Der berechnete Wert der Funktion

.foo {    width: calc( 100% / calc(100px * 2) );
}

lautet wie folgt:

.foo {    width: calc( 100% / (100px * 2) );
}

Downgrade-Schema

clac() wurde allgemein unterstützt.

Bei Browsern, die calc() nicht unterstützen, wird der gesamte Attributwertausdruck ignoriert. Wir können jedoch einen festen Wert als Fallback-Lösung für Browser verwenden, die calc() nicht unterstützen.

.foo {    width: 90%; 
    width: calc(100% - 50px);
}

vi-Design http://www.maiqicn.com

Office-Ressourcen-Website https://www.wode007.com

Welche Szenarien können calc() verwenden

Beispiel 1 – Zentriertes Element Mit calc() erhalten wir eine weitere Lösung für vertikal zentrierte Elemente. Wenn wir die Abmessungen des Elements kennen, besteht eine typische Lösung darin, negative Ränder zu verwenden, um es um die halbe Distanz zwischen Höhe und Breite zu verschieben, wie unten gezeigt:

.foo {    position: absolute
    top: 50%;    left: 50%;    marging-top: -150px;    margin-left: -150px;
}

Mit der Funktion calc() können wir dasselbe mit just erreichen die oberen und linken Attribute Wirkung: Mit dem Eingreifen von

.foo {    position: absolute
    top: calc(50% - 150px);    left: calc(50% - 150px);
}

Flexbox wird diese Methode nur noch selten benötigt. Es gibt jedoch Situationen, in denen Flexbox nicht verwendet werden kann. Diese Methode ist beispielsweise nützlich, wenn das Element absolut oder fest positioniert sein muss.

Beispiel 2 – Wurzelgitterabmessungen erstellen

Mit rem kann die Funktion calc() verwendet werden, um ein Ansichtsfenster-basiertes Gitter zu erstellen. Wir können die Schriftgröße des Stammelements auf einen Bruchteil der Breite des Ansichtsfensters festlegen.

html {  
    font-size: calc(100vw / 30);
}

Jetzt ist 1rem 1/30 der Breite des Ansichtsfensters. Jeder Text auf der Seite wird automatisch basierend auf Ihrem Ansichtsfenster skaliert. Darüber hinaus zeigen Ansichtsfenster mit den gleichen Proportionen immer die gleiche Textmenge an, unabhängig von den tatsächlichen Abmessungen des Ansichtsfensters.

Wenn wir rem verwenden, um die Größe für Nicht-Text festzulegen, befolgen sie dieses Verhalten ebenfalls. Ein 1rem-width-Element beträgt immer 1/30 der Breite des Viewport-Elements.

Beispiel 3 – Klarheit

Abschließend macht calc() Berechnungen klarer. Wenn Sie eine Gruppe von Elementen erstellt haben, die 1/6 der Breite des Containers ihres übergeordneten Elements hat, könnten Sie schreiben:

.foo {    width: 16.666666667%;
}

Allerdings kann es klarer und besser lesbar sein:

.foo {    width: calc(100% / 6);
}

Mit calc() können wir noch mehr tun. Viele Dinge , wie zum Beispiel die Erstellung eines Rastersystems. Es ist eine der nützlichsten neuen Funktionen von CSS.

Das obige ist der detaillierte Inhalt vonWas nützt CSS calc()?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!