3 Dinge (fast) niemand weiß über CSS

CSS -TIPS -Test: Verstehst du CSS wirklich?

Überprüfung der Schlüsselpunkte

• Der beste Weg, um die doppelte Leitungshöhe festzulegen, besteht darin, unitlose Nummern (z. B. 2) zu verwenden, damit untergeordnete Elemente mit unterschiedlichen Schriftgrößen das korrekte Verhältnis von Linienhöhen erben können.
• Obwohl das allgemeine Missverständnis, das z-index selbst überlappt, überlappt, kann HTML -Elemente tatsächlich durch das margin Attribut überlappt werden (insbesondere negative Margen).
• Pseudo-Elemente und Pseudoklassen sind sehr unterschiedliche Funktionen in CSS: Pseudoklassen werden unter bestimmten Bedingungen auf tatsächliche HTML-Elemente angewendet, und Pseudo-Elemente ermöglichen das Styling von Teilen eines Dokuments, die keine tatsächlichen HTML-Elemente sind.
• w3c Versuche, zwischen Pseudo-Elementen und Pseudoklassen in der CSS3-Selektorspezifikation unter Verwendung von zwei Colons (::first-line) für Pseudo-Element-Selektoren und einem Dickdarm (:hover) für Pseudo-Element-Selektoren zu unterscheiden Bestell zur Rückverdichtung muss der Browser beide Versionen unterstützen.

Glauben Sie, dass Sie CSS beherrschen? Wenn die kostenlosen CSS -Testergebnisse, die ich in den letzten sechs Monaten online geliefert habe, in jeder Hinsicht aufweist, wissen viele erfahrene Entwickler nicht so viel über CSS, wie sie denken. Von den mehr als 3.000 Menschen, die bisher am Test teilgenommen haben, beträgt die durchschnittliche Punktzahl nur 55%.

ist jedoch der Durchschnitt selbst nicht so interessant. Ich möchte mehr darüber wissen, wo sich die Leute falsch liegen. Um diesen Artikel zu schreiben, analysierte ich die Daten und konzentrierte mich auf drei Themen, bei denen Menschen besonders niedrig erzielten. Ich werde jede Frage nacheinander erläutern, Ihnen die Antworten zeigen, die die meisten Personen wählen, und die richtigen Antworten erklären.

Es ist sicher zu sagen, dass Sie einen unfairen Vorteil haben, wenn Sie den Test selbst selbst machen, wenn Sie diesen Artikel gelesen haben!

Problem 1: Der beste Weg, um Zeilenhöhe

festzulegen

Die erste Frage sollte für Personen, die regelmäßig an Textstilen arbeiten, einfach sein:

Sie möchten, dass der Text auf der Website standardmäßig doppelt so hoch ist. Welcher der folgenden line-height -Werte ist der beste Weg, um dies zu erreichen?

• 200%
• 2em
• 2
• double

Es gibt vier Antworten zur Auswahl, und Sie erwarten, dass 25% der Personen durch Glück ordnungsgemäß antworten, aber nur 31% werden diese Frage richtig beantworten! Nehmen Sie sich etwas Zeit, um eine Antwort für sich selbst zu wählen und weiter zu lesen.

Zunächst einmal ist double eine Ablenkung. line-height Der einzige akzeptierte Schlüsselwortwert ist normal. Ich bin froh zu sagen, dass nur 9% der Menschen diese Option ausgewählt haben. Die anderen drei Antworten sind sehr beliebt.

Die Antwort, die die meisten Menschen gewählt haben, lautet 2em (39% gewählt diese Antwort). Tatsächlich wird 2em sicherlich doppelte Höhen für die Elemente anwenden, die es anwenden; Entweder EM ist beliebter als Prozentsätze oder die Leute verstehen sie nicht wirklich. 200%

Die richtige Antwort lautet jedoch

. 2

Ich habe mich vor langer Zeit mit dieser Lektion einverstanden, als ich CSS zum ersten Mal gelernt habe. Geben Sie immer als einheitlosen Zahl an. line-height

Angenommen, die Seite hat eine Standard -Schriftgröße von 12PT, enthält aber auch einen Titel mit einer Schriftgröße von 24PT. Wenn Sie das

des Körpers auf line-height (oder 2em) festlegen, erhalten Sie im gesamten Dokument genau 24PT (doppelt so groß wie die Körperschrift). Der Titel ist also eine Doppelhöhe anstelle einer Doppellinienhöhe! 200%

Stattdessen fordert das Einstellen von

nach line-height dem Browser an, das Verhältnis von Schriftarten zu einer Schriftgröße/Linien zu erhalten, auch wenn sich die Schriftgröße ändert. Die Linienhöhe des Körpers beträgt 24PT, aber für die 24 -6 -Schriftart des Titels erhöht sich die Linienhöhe automatisch auf 48PT. 2

Frage 2: Wie man Elemente überlappen

Diese Frage ist etwas schwierig. Es erfordert einige "Fähigkeiten", die CSS -Layout häufig erfordert:

Welche der folgenden CSS -Attribute können dazu führen, dass sich HTML -Elemente überlappen?

• z-index
• margin
• overflow
• background

Haben Sie die Antwort gewählt? OK, lass uns tiefer gehen.

Auch hier gibt es eine Option, die leicht auszuschließen ist:

. Jeder außer 2% der Tester mied es, weil sie wussten, dass sie die Hintergrundfarbe und das Bild kontrollierten. background

Leider wählen die meisten Leute

direkt. Bis zu 46% haben diese Antwort gewählt. Ich denke, es liegt daran, dass niemand wirklich versteht, wie z-index funktioniert. Tatsächlich hat das Einstellen des z-index -attributs keine Wirkung. Kurz gesagt, z-index ermöglicht es Ihnen, die Stapelreihenfolge von Elementen zu steuern, die sich überlappen, aber sie müssen sich zuerst überlappen. MDN hat einen sehr guten Artikel mit dem Titel „Verständnis für CSS Z-Index“, die es wert ist, weitere Details zu lesen. position z-index Wenn Sie jemals z-index verwendet haben, sollte es auch einfach ausschließen. Es steuert das Verhalten von Inhalten, das nicht für die Größe der Box geeignet ist: ob er abgeschnitten wird, ob es aus der Rande der Box fließt usw. Dies hängt auch davon ab, ob die Kastengröße durch andere Eigenschaften eingeschränkt wird. Trotzdem denken 22%.

Dies lässt uns nur overflow, was die richtige Antwort ist. Nur 30% der Personen antworteten richtig. Möglicherweise sind Sie neugierig, wie ein Attribut, das Entfernungen zwischen Elementen erzeugt, dazu führen kann, dass sie sich überlappen. Wenn Sie ein tatsächliches CSS -Layout durchgeführt haben, sollte die Antwort offensichtlich sein: Negative Margen führen dazu, dass sich Elemente überlappen.

Um dies zu demonstrieren, erstellen Sie eine Seite mit zwei DIV -Elementen. Stellen Sie die margin-top des zweiten Divs auf einen negativen Wert ein, wie z. B. -100px. Knall! Der zweite Div bedeckt nun die unteren einhundert Pixel der ersten Div.

In der Praxis überlappen Sie sich kaum absichtlich solche Blöcke wie dieses, aber negative Margen sind sehr nützlich, um HTML -Elemente an Orte zu drücken, an denen sie normalerweise nicht gehen. Ich benutze sie oft, um Elemente zu drücken, die nach links oder rechts in den Füllbereich ihrer übergeordneten Box schweben.

Für die Begeisterung für Webdesign-Geschichte machte die Verwendung von negativen Rand-Überlappelementen im Jahr 2005 drei Spalten-Seiten-Layouts, einschließlich des sogenannten ein echtes Layout (und späteres Holy Grail-Layout).

Problem 3: Pseudo-Elemente und Pseudoklasse

Ich gebe zu, die letzte Frage ist ein bisschen verabscheuungswürdig. Aber nur 23% der Tester konnten diese Frage richtig beantworten (dies ist schlechter als Glück!) Und es hat offensichtlich einen verwirrenden Punkt berührt:

Welche der folgenden Effekte eignet sich am besten für die Verwendung von Pseudoelementen, um sie zu implementieren?

• Fügen Sie dem Benutzer einen Schatten hinzu, wenn er über den Hyperlink schwebt.
• Wenn das Kontrollkästchen ausgewählt ist, werden die Beschriftungen des Kontrollkästchens in verschiedenen Farben angezeigt.
• Weisen Sie ungerade und sogar Reihen der Tabelle verschiedene Hintergrundfarben zu.
• Zeigen Sie in einem flexiblen Seitenlayout die erste Zeile des Absatzes als fettem Text an.

Diese drei Auswahlmöglichkeiten sind alle Effekte, die mit Pseudoklassen implementiert sind. Kannst du sie unterscheiden?

Pseudoklassen sind spezifische Zustände, in denen sich das tatsächliche HTML-Element befindet. Stellen Sie sich dies als eine virtuelle Klasse vor, die der Browser unter bestimmten Bedingungen automatisch für Elemente gilt.

Das Pseudoelement ist Teil des Dokuments, und selbst wenn es sich nicht um ein tatsächliches HTML-Element handelt, können Sie es CSS ermöglichen, es zu stylen. Es ist wie ein virtuelles HTML -Element - Sie können es auch dann stylen, wenn es kein tatsächliches HTML -Tag um es gibt.

Mit diesem Unterschied schauen wir uns die folgenden Optionen an:

Fügen Sie dem Benutzer einen Schatten hinzu, wenn er über den Hyperlink schwebt.

Der Hyperlink ist ein tatsächliches HTML -Element. Das Anwenden von Stilen nur in bestimmten Fällen (wenn die Maus darüber schwebt) bedeutet, dass wir Pseudoklassen verwenden. In diesem Fall ist die von Ihnen verwendete Pseudoklasse :hover.

22% der Tester betrachteten dies als Pseudoelement.

Wenn das Kontrollkästchen ausgewählt ist, werden die Beschriftungen des Kontrollkästchens in verschiedenen Farben angezeigt.

In ähnlicher Weise ist ein Tag ein tatsächliches HTML -Element, kein virtuelles Element. Wenn das Kontrollkästchen ausgewählt ist, wendet der Browser die :checked Pseudo-Klasse darauf an. Sie können es dann in Ihrem Selektor verwenden, um das Kontrollkästchen zu stylen oder sogar das Etikett daneben zu stylen (z. B. mit dem benachbarten Geschwister -Selektor ).

20% der Tester betrachteten dies als Pseudoelement.

Weisen Sie ungerade und sogar Reihen der Tabelle verschiedene Hintergrundfarben zu.

Dies ist eine Frage, die Menschen wirklich täuscht, aber wir sprechen auch davon, Stile auf tatsächliche HTML -Elemente anzuwenden (in diesem Fall tr Elemente). tr Ist es seltsam oder sogar in der Reihe von untergeordneten Elementen seines übergeordneten Elements, was nur ein weiterer Fall ist, in dem Sie mit Pseudoklassen übereinstimmen können.

in diesem Fall ist die Pseudoklasse für sogar Elemente und :nth-child(even) (oder :nth-child(2n)) für ungerade Elemente :nth-child(odd) (oder :nth-child(2n 1)).

Ich denke, das liegt einfach daran, dass :nth-child und Pseudo-Elemente normalerweise wie sehr obskure CSS-Funktionen klingen, aber 36% der Tester haben dies als Pseudo-Element ausgewählt.

Zeigen Sie in einem flexiblen Seitenlayout die erste Zeile des Absatzes als fettem Text an.

Dies ist natürlich die richtige Antwort. Bisher war der Unterschied hoffentlich klar. In einem flexiblen Seitenlayout können Sie den HTML -Code der Seite nicht anzeigen und sagen: "Die Elemente dort enthalten nur die erste Zeile des Absatztextes". Der Browser wickelt die Linie nach der Breite des Absatzes, die Sie in einem flexiblen Seitenlayout nicht kontrollieren können.

:first-line ist ein Pseudoelement, mit dem Sie Stile auf die erste Textzeile in einem Block anwenden können, unabhängig davon, wo die erste Zeile in die zweite Zeile unterbrochen wird.

Wenn Sie denken "Okay, das klingt vernünftig, aber niemand kennt den Unterschied zwischen Pseudo-Elementen und Pseudoklassen", dann stimmt W3C mit Ihnen zu. In der CSS3-Selektorspezifikation änderte sie die Syntax so, dass der Pseudo-Element-Selektor zwei Kolonen verwendet (::first-line), während die Pseudoklasse noch einen Dickdarm verwendet (:hover). Natürlich muss der Browser für die Rückwärtskompatibilität beide Versionen unterstützen.

Also ja, wie ich sagte: Mean Frage. Aber hey, wenn Sie ein CSS-Geek wie ich sind, werden Sie den Unterschied zwischen Ihrem Pseudo-Element und der Pseudoklasse kennen.

Wie sind Ihre Punkte?

Es ist so: Drei Rätsel im Test. Wenn Sie eine dieser Fragen zuversichtlich beantworten, machen Sie einen guten Job. Hast du zwei richtig beantwortet? Nicht schlecht. Wenn Sie alle drei richtig antworten würden, würde ich gerne hören, was Sie denken! Besonders nachdem ich diese Antworten gegeben habe, brauche ich wirklich einige schwierigere CSS -Fragen. Bitte poste sie in den Kommentaren!

Wenn Ihnen diese Fragen gefallen, möchten Sie vielleicht den Rest der Tests ausprobieren. Seien Sie versichert, andere Fragen sind viel einfacher als diese… die meisten von ihnen!

Das obige ist der detaillierte Inhalt von3 Dinge (fast) niemand weiß über CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!