Über die calc()-Methode in CSS3

Dieser Artikel stellt hauptsächlich die calc()-Methode von CSS 3 im Detail vor. Sie ist sehr gut und hat Referenzwert.

Der folgende Code stellt calc() in CSS3 vor Sie. Methode, der spezifische Inhalt ist wie folgt:

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

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

Wie im obigen Code 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).

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().

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

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

Anweisungen zur 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)

• *, / benötigt keine Leerzeichen davor und danach, wird aber empfohlen.
  

Unterstützbarkeit

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Implementierung der @keyframes-Animation in CSS3

Über die Methode der responsiven zentrierten Anzeige von CSS-Bannern Bild

Verwendung des CSS-Tabellenlayout-Attributs

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