Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

小云云
Freigeben: 2018-01-15 09:51:34
Original
2676 Leute haben es durchsucht

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>
Nach dem Login kopieren

[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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage