Bitte beachten Sie, dass nicht das Bedienfeld „Stile“ (ich weiß, was ausgegraut in diesem Kontext bedeutet - nicht angewendet), sondern das nächste Bedienfeld, das Bedienfeld „Berechnete Eigenschaften“.
Was bedeutet es, wenn eine berechnete Eigenschaft ausgegraut angezeigt wird?
Beispiel:
Antworten:
NB: Diese Antwort hat keine soliden Beweise, sie basiert auf meinen Beobachtungen während der Zeit.
Die grau berechneten Eigenschaften sind weder Standard noch vererbt. Dies tritt nur bei Eigenschaften auf, die nicht für das Element definiert wurden, sondern entweder aus den untergeordneten oder übergeordneten Elementen basierend auf dem Rendern des Laufzeitlayouts berechnet wurden.
Nehmen Sie diese einfache Seite als Beispiel, displayist Standard und font-sizewird vererbt:
<style>
div { font-size: 13px; }
</style>
<div>
<p>asdf</p>
</div>
In diesem speziellen Beispiel heightwird der untergeordnete <p>Textknoten (Schriftgröße plus Zeilenhöhe) widthaus der übergeordneten <div>Breite berechnet, die auch aus dem übergeordneten Textknoten berechnet wird <body>.
EDIT: Nun, ich dachte noch einmal, hier ist meine meinungsbasierte Antwort. Ich sollte mir später wirklich den Chromium-Quellcode ansehen: D.
Durch Erweitern dieser Pfeile können Sie sehen, welche tatsächliche Regel auf das Element angewendet wird, und zwar unter allen dagegen definierten (entweder direkt oder geerbt, entweder vom Entwickler oder vom Browser):
Hier können Sie bis zu jeder Definition zurückverfolgen, einschließlich der im Browser integrierten Regeln, und mit dem CSS-Kaskadenmechanismus (Überschreiben) nachsehen.
Für Elemente, die keine CSS-Definition haben (keine direkt definierte, keine geerbte, kein eingebauter Browser), müssen Sie keine Quelle verfolgen. Und die Eigenschaftswerte werden vollständig zur Laufzeit berechnet.
Wenn Sie Alle anzeigen aktivieren, werden mehr graue Eigenschaften angezeigt. Diese sind auch nirgendwo definiert. Im Gegensatz zu den vorherigen Screenshots werden diese jedoch nicht zur Laufzeit berechnet - es handelt sich um den Standardwert der CSS-Spezifikation.
run-time calculatedda die Graueigenschaften normalerweise "Höhe" und "Breite" sind. Wenn Sie darüber nachdenken, sind dies Werte, die dynamisch von den untergeordneten Elementen eines Elements abhängen (z. B. Textmenge und Schriftgröße von) der im Element enthaltene Text oder die Breite des übergeordneten Elements, wenn das Element eine Breite hat: 100%)
widthBeispiel zum Stil?