So verwenden Sie die calc()-Methode von CSS3

Dieses Mal zeige ich Ihnen, wie Sie die calc()-Methode von CSS3 verwenden Werfen wir einen Blick darauf. Der folgende Code führt Sie in die Methode calc() in CSS3 ein. Der spezifische Inhalt lautet wie folgt:

[Strg+A Alle Auswahltipps: Sie können einen Teil davon ändern Code zuerst, drücken Sie erneut „Ausführen“]

Wie im Code oben gezeigt, zeigt die Vorschau, dass das rote Kästchen überschritten wird, da in Standard-CSS die Breite keinen Rand einschließt (die Breite im alten IE schließt den Rand ein).

<p style="width:100px; height:50px; background:red;">
  <p style="width:100%; height:20px; margin:5px; background:green;"></p>
</p>

Um den oben genannten Effekt zu erzielen, legen wir normalerweise eine weitere Schicht p in die Mitte (einige Leute sagen, können wir nicht einfach width: 100 % entfernen? Beruhigen Sie sich, wir geben ein Beispiel. In Tatsächlich kann es in manchen Fällen nicht sein, Breite abzubrechen: 100 % )

Gibt es etwas Bequemeres? Verwenden Sie stattdessen calc().

[Strg+A Alle Auswahltipps: Sie können zuerst einen Teil des Codes ändern und dann auf Ausführen drücken]

<p style="width:100px; height:50px; background:red;">
  <p style="width:calc(100% - 10px); height:20px; margin:5px; background:green;"></p>
</p>

Gebrauchsanweisung

Unterstützt: +, -, *, /, unterstützt gemischte Verwendung

• Unterstützt: %, px, em, rem usw.

• Vor und nach +, - müssen Leerzeichen stehen, zum Beispiel: calc(100%-10px) ist falsch und sollte geändert werden in: calc(100% - 10px)

• *, / vorher und nachher Sie benötigen keine Leerzeichen, werden aber empfohlen.

• Unterstützung

Alle gängigen Desktop-Browser unterstützen es. Es wird gesagt, dass mobile Browser dies kaum unterstützen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website ! Empfohlene Lektüre:

So verwenden Sie Neuzeichnen und Umfließen

So verwenden Sie CSS-Einstellungen zum Aufzeichnen von Benutzerkennwörtern

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die calc()-Methode von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!