Heim > Artikel > Web-Frontend > Ü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!