CSS-Wert-CSS-Tutorial-php.cn

Die Quelle der CSS-Werte

Zunächst wissen wir, dass CSS zwar eine einfache Syntax hat, aber nicht blind geschrieben wird. Seine Eigenschaften und Werte sind offiziell definiert, um genau zu sein von Browserherstellern.

Diese angegebenen Werte stammen aus den folgenden Situationen:

erben bedeutet, den Wert vom Vorgängerelement zu erben. Jedes Attribut hat es.
initial stellt den Standardwert des Benutzeragenten dar. Jedes Attribut hat es.
Browserspezifische Werte, normalerweise mit dem Präfix -ms-, -webkit- usw., und einige Werte haben kein Präfix.
Von Browsern gemeinsam genutzte Werte Obwohl sie gemeinsam sind, ist die Implementierung jedes Browsers nicht unbedingt gleich.

Daher ist es sicher, dass CSS-Kompatibilitätsprobleme hauptsächlich durch die Inkonsistenz und Weiterentwicklung des von Browserherstellern implementierten CSS-Renderings verursacht werden.

Der Wert in der CSS-Spezifikation

Der dem Benutzer schließlich präsentierte Wert durchläuft 4 Schritte: zuerst den angegebenen Wert (den „spezifizierten Wert“) und dann den geerbten Wert (den „ berechneter Wert"), dann in den verwendeten Wert umgewandelt (der „verwendete Wert") und schließlich der tatsächliche Wert (der „tatsächliche Wert"), der aufgrund der Einschränkungen des Browsers selbst erhalten wird.

ist 指定值-->计算值-->使用值-->实际值

Angegebener Wert

Es gibt drei Möglichkeiten, den Wert anzugeben. Eine ist der Standardwert des Benutzeragenten, der initial ist, die andere ist der vom Künstler im Programm geschriebene Wert , und der andere ist der Wert, der die angegebene Vererbung anzeigt, nämlich inherit. Normalerweise müssen weder inherit noch initial explizit angegeben werden. Aber in manchen Fällen sind diese beiden Werte sehr nützlich.

berechneter Wert

Dies ist der Wert, der von der Rendering-Engine durch Parsen der CSS-Datei und der kaskadierenden Regelvererbungsbeziehung berechnet wird, bevor das Dokument erstellt wird.

Verwendeter Wert

Dies ist der Wert, der erhalten wird, nachdem CSS mit HTML kombiniert wurde, um ein Dokument zu bilden.

Verstehen Sie, dass der Unterschied zwischen berechneten Werten und verwendeten Werten darin besteht, dass der Browser die HTML- und CSS-Dateien zunächst separat analysiert und sie dann zusammenführt. Einzelheiten entnehmen Sie bitte diesen beiden Bildern.

Webkit-Rendering-Prozess

css值 Geoko-Rendering-Prozess

css值 tatsächlicher Wert

ist der letzte verfügbare Browser Beispielsweise können alle Browser nicht mit 7 Dezimalstellen umgehen, sodass die Genauigkeit verringert wird.

Diese 4 Werte werden aus der Spezifikation abgeleitet. Andere Browserimplementierungen funktionieren möglicherweise nicht nach diesem 4-Schritte-Prozess, aber derzeit folgen Mainstream-Browser diesem Prozess

Hinweis dass die Kaskade in der Vererbung unterschiedlich ist. Kaskadierung gilt für einzelne CSS-Eigenschaften, Vererbung für Elemente. Beim Layering kommt es häufig zu Gewichtungsproblemen.

Chrome Developer

css值

kann geändert werden 🎜>, Zeigt an, dass die Regel nicht verfügbar ist und wird zur Laufzeit ausgewertet.
Beispiel:

Ich gebe nun die Höhe von h1 wie folgt an

Sehen Sie sich den berechneten Wert an und Sie können sehen, dass Chrome ihn 4 Nachkommastellen beibehält: css值

Sehen Sie sich den verwendeten Wert an (der Grund für die Suche in diesem Feld ist, dass das Feld die Bildung des darstellt Dokument, das dem zuvor verwendeten Wert entspricht) css值

Der endgültige tatsächliche Wert ist hier (direkt auf der Seite anzeigen): css值

Sie können sehen, dass bei vorhandener Polsterung die Polsterung das Dokument bildet und es dann zur visuellen Breite und Höhe hinzufügt, wenn es im Browser angezeigt wird. Natürlich ist es anders, wenn das Attribut „box-sizing“ angegeben wird, aber Sie können wissen, dass dies im letzten Schritt geschieht. css值