Was ist der Zweck dieses CSS-Snippets?

8

Ich habe das folgende Snippet in meinem Stylesheet. Was ist die Auswirkung oder der Zweck?

%Vor%     
FiveTools 12.08.2011, 14:43
quelle

5 Antworten

8

Es ist ein CSS zurücksetzen . Der Zweck besteht darin, Standard-Nicht-Null-Abstände für alle Elemente ( * ) zu entfernen. Alle Browser haben ein Standard-Stylesheet und sie sind nicht sehr konsistent. Nimm <form> als Beispiel.

Hinweis: Das Festlegen der Eigenschaften left und top auf 0px sieht für mich nicht richtig aus. Es wird höchstwahrscheinlich Probleme mit der absoluten Positionierung geben. Wenn Sie ein Element absolut positionieren, möchten Sie möglicherweise nur den vertikalen oder horizontalen Versatz (nicht beide) definieren, wobei der andere Versatz unverändert bleibt. Das Zurücksetzen CSS erlaubt das nicht, weil es Werte für vertikal und horizontal gibt. Vielleicht möchten Sie auch ein Element von unten positionieren. Wenn Sie das zurücksetzen, wird es sowohl bottom als auch top haben, was in den meisten Fällen nicht erwünscht ist und die Höhe des Elements ändern oder einen der Offsets nicht respektieren kann. Auf jeden Fall wird es dir etwas geben, das nicht beabsichtigt ist und dein Layout durchbrechen.

Für diejenigen, die mehr erfahren möchten: Ссылка

    
Alin Purcaru 12.08.2011, 14:45
quelle
11

Es ist ein Reset . Alle Elemente haben danach 0 Rand, Padding, etc.

Solche Rücksetzungen sind nützlich, um das Verhalten zu normalisieren (einige Browser haben vordefinierte Ränder, Paddings usw.) und um die visuelle Konsistenz zwischen Browsern zu verbessern.

    
miku 12.08.2011 14:44
quelle
1

Es wendet die darin enthaltenen Regeln auf alle Elemente der Seite an; Erstellen einer vorhersagbaren Basis für kaskadierende Regeln.

Diese Technik wird "reset" (google für "CSS Reset") genannt und ist ein Ansatz, um verschiedene Browser mit verschiedenen Standard-CSS-Regeln aufzulösen.

Diese Regeln sollten so früh wie möglich angewendet werden, in der Regel am Anfang des zuerst geladenen CSS-Arbeitsblattes.

    
STW 12.08.2011 14:46
quelle
0

Der Zweck Ihres Snippets ist das Zurücksetzen des Rands, das Auffüllen und das Festlegen der Position in der oberen linken Ecke des Ansichtsfensters in Ihrem Webbrowser.

    
ninetwozero 12.08.2011 14:45
quelle
0

Der Estriche Simbol ist bekannt als Alles / Alles. Die Bedeutung davon ist, dass das CSS über alle Elemente implementiert wird und die Werte als parametrisiert werden.

    
JSJ 12.08.2011 14:54
quelle

Tags und Links