Detaillierte Erläuterung der Verwendung von calc() in CSS3

Dieser Artikel stellt hauptsächlich die calc()-Methode von CSS 3 im Detail vor. Sie ist sehr gut und hat Referenzwert. Ich hoffe, sie kann jedem helfen.

Der folgende Code führt Sie in die calc()-Methode in CSS3 ein. Der spezifische Inhalt lautet wie folgt:

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

[Strg+A Auswählen Alle Tipps: Sie können zuerst einen Teil des Codes ändern und dann auf „Ausführen“ drücken (Breite im alten IE inklusive Rand).

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>

Anweisungen für Verwendung

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 )
*, / Leerzeichen davor und danach sind nicht erforderlich, werden aber empfohlen.

• 
  

Unterstützbarkeit

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

Verwandte Empfehlungen:

Detaillierte Einführung in die neue Eigenschaft calc() in CSS3

Reaktion auf calc() in CSS3-Einführung in Musterlayoutmethoden

Anleitung zur Verwendung des calc()-Attributs in CSS3, um Größenwerte mithilfe von Berechnungen auszudrücken

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von calc() in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!