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
Geoko-Rendering-Prozess
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
Wert angeben (3 Typen)- 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: 
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) 
Der endgültige tatsächliche Wert ist hier (direkt auf der Seite anzeigen):
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. 
Die Quelle der CSS-Werte
Zuallererst wissen wir, dass CSS zwar eine einfache Syntax hat, seine Attribute jedoch nicht blind geschrieben werden und Werte sind Es ist offiziell definiert, genauer gesagt, es wird vom Browserhersteller definiert.
Diese gegebenen 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 Vererbungsbeziehung kaskadierender Regeln 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
Geoko-Rendering-Prozess
tatsächlicher Wert
ist der letzte verfügbare Browser Beispielsweise können nicht alle Browser 7 Dezimalstellen verarbeiten, 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
Wert angeben (3 Typen)- 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:
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)
Der endgültige tatsächliche Wert ist hier (direkt auf der Seite anzeigen):
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.
Weitere Artikel zum Thema CSS-Werte finden Sie auf der chinesischen PHP-Website!
