Was sind die Chrome-Entwickler-Tools, die Farben hervorheben?

54

In früheren Chrome-Versionen konnten Sie mit den Entwicklertools Seitenelemente überprüfen und sie blau hervorheben. Aktuelle Versionen von Chrome heben Elemente in Blau hervor, haben aber auch grüne und orangefarbene Bereiche.

Was bedeuten die Farben?

Bildbeschreibung hier eingeben

Synetech
quelle
1
Dies ist, was ich hierher gekommen bin: blau # 9FC4E7 grün # C2DDB6 orange # F8CB9C
schnelle Multiplikation

Antworten:

54

Die Farben repräsentieren die Bereiche der Elemente, die dem CSS-Box-Modell entsprechen .

  • Blau ist der Inhalt
  • Grün ist die Polsterung
  • Orange ist die Grenze
  • Rot ist der Rand

(Die Wahl von ähnlichen Orange- und Rottönen ist wahrscheinlich nicht die beste.)

Sie können dies im Abschnitt " Metriken " der Entwicklertools sehen (der standardmäßig ausgeblendet ist):

Bildbeschreibung hier eingeben

Synetech
quelle