Eine ausführliche Erläuterung erweiterter Funktionen wie Priorität und Stacking-Kontext in CSS vermittelt Ihnen ein tieferes Verständnis von CSS! !

Wenn wir CSS lernen, haben wir normalerweise das Gefühl, dass die Syntax leicht zu beherrschen ist, aber in der tatsächlichen Anwendung stoßen wir auf verschiedene „Gruben“, die schwer zu füllen sind. Um die gleiche Verwirrung und Verwirrung zu vermeiden, wird in diesem Artikel erklärt es im Detail Es verfügt über erweiterte Funktionen wie Priorität und Stapelkontext in CSS. Vermitteln Sie ein tieferes Verständnis von CSS.

CSS-Priorität

Priorität ist das, was der Browser bestimmt und auf das Element anwendet, indem er beurteilt, welche Attributwerte für das Element am relevantesten sind. Die Priorität wird nur durch die aus Selektoren bestehenden Matching-Regeln bestimmt. Wenn Sie einem P-Tag eine Klasse (Class) hinzufügen, ändern sich einige Attribute in der Klasse nach der Ausführung nicht und es liegt ein Prioritätsproblem mit dem CSS-Selektor vor.

Selektorpriorität

Gemeinsame Selektortypen:

• Inline-Stil, z. B. ...
• ID-Selektoren, z. B #id;
• Klassenselektoren (Klasse), wie zum Beispiel .class {...}, [href=''],
• Tagselektoren (Tag), wie zum Beispiel p,:before

Das Gewicht Jeder Selektortyp ist unterschiedlich und die Priorität jedes Selektors wird durch das Gewicht bestimmt.

• Inline-Stil: 1,0,0,0
• ID-Selektor: 1,0,0
• Klassenselektor: 1, 0
• Tag-Auswahl: 1

Quellprioritätsreihenfolge, wie im Bild gezeigt

Das Stilsystem beginnt mit der Zuordnung der Regeln von der Auswahl ganz rechts nach links. Solange sich links vom aktuellen Selektor weitere Selektoren befinden, bewegt sich das Stilsystem weiter nach links, bis es ein Element findet, das der Regel entspricht, oder aufgrund einer Nichtübereinstimmung beendet wird.

CSS Prioritätsregel:

1. Jeder Selektor hat eine Gewichtung. Je größer die Gewichtung, desto höher die Priorität.
2. Wenn die Gewichtungen gleich sind, sind die später angezeigten Stylesheet-Einstellungen besser als die zuerst angezeigten. Einstellungen;
3. Die Regeln des Erstellers sind höher als die des Betrachters: Das heißt, die vom Webseitenautor festgelegten CSS-Stile haben eine höhere Priorität als die vom Browser festgelegten Stile.
4. Die geerbten CSS-Stile sind nicht so gut wie die Später angegebene CSS-Stile;
5. In den Gruppenattributeinstellungen mit „!important“ gekennzeichnete Regeln haben die höchste Priorität

Häufig verwendete CSS-Modelle

Das Box-Modell ist ein in der CSS-Technologie verwendetes Denkmodell, das häufig verwendet wird im Webdesign.

Box-Modell-bezogene CSS-Attribute, Elementinhalt (Elementinhalt), Breite und Höhe (Breite/Höhe), Innenabstand, Rahmen und Rand.

In CSS beziehen sich Breite und Höhe auf die Breite und Höhe des Inhaltsbereichs (Elements). Das Erhöhen der Abstände, Ränder und Ränder hat keinen Einfluss auf die Größe des Inhaltsbereichs, erhöht jedoch die Gesamtgröße der Elementbox. Gehen Sie davon aus, dass die Box einen Rand von 10 Pixeln und einen Abstand von 5 Pixeln auf jeder Seite hat. Wenn die Elementbox 100 Pixel groß sein soll, müssen Sie die Breite des Inhalts auf 70 Pixel festlegen. Die erforderlichen Attribute sind wie folgt:

Grundlegende Attribute

• Breite/Höhe
• Padding
• Margin
• Boder
• Outline
• Offset-Attribut
  • Top/Left/Bottom/Right
• und .NET Der Unterschied zwischen WinForm:
  • Width/Height beinhaltet standardmäßig kein Padding
  • Die Reihenfolge der vier Werte der Margin/Padding-Eigenschaft ist oben rechts unten links (im Uhrzeigersinn)

Alles kann als Boxmodell betrachtet werden

Verschmelzung des vertikalen Randes

Wenn der vertikale Rand von

12 Pixel beträgt, wie groß ist der vertikale Abstand zwischen den beiden

? Der gesunde Menschenverstand sollte 12 + 12 = 24 Pixel sein, aber die Antwort ist immer noch 12 Pixel. Da sich die vertikalen Ränder überlappen, werden die größeren abgedeckt.

Das Positionsattribut gibt den Positionierungstyp des Elements an. Dieses Attribut definiert den Positionierungsmechanismus, der zum Festlegen des Layouts des Elements verwendet wird. Jedes Element kann positioniert werden, aber absolute oder feste Elemente erzeugen eine Box auf Blockebene, unabhängig vom Typ des Elements selbst. Ein relativ positioniertes Element wird im normalen Fluss von seiner Standardposition versetzt. Das Folgende ist der Wertebereich des Positionsattributs:

• Statisches Normalflusslayout (Normalfluss), Standardwert. Ohne Positionierung erscheint das Element im normalen Fluss (ohne Berücksichtigung der Top-, Bottom-, Left-, Right- oder Z-Index-Deklarationen).
• Relative unterstützt das normale Flusslayout mit Offset-Attributen und generiert relativ positionierte Elemente, die relativ zu ihren normalen Positionen positioniert sind. Daher fügt „left:20“ 20 Pixel zur LINKEN Position des Elements hinzu.
• Absolut Absolut positioniertes Layout innerhalb des Containerelements, generiert absolut positionierte Elemente, die im Gegensatz zur statischen Positionierung relativ zum ersten übergeordneten Element positioniert sind. Die Position des Elements wird über die Attribute „left“, „top“, „right“ und „bottom“ angegeben.
• Festes absolut positioniertes Layout innerhalb des Anzeigebereichs, generiert absolut positionierte Elemente, positioniert relativ zum Browserfenster. Die Position des Elements wird über die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

Float-Eigenschaft

Die Float-Eigenschaft definiert, in welche Richtung das Element schwebt. In der Vergangenheit wurde diese Eigenschaft immer auf Bilder angewendet, wodurch der Text um das Bild herum umbrochen wurde. In CSS kann jedoch jedes Element schwebend dargestellt werden. Ein schwebendes Element erstellt eine Box auf Blockebene, unabhängig von der Art des Elements.

Stapelkontext

Die Struktur, die Eigenschaften des Z-Index-Stapelraums bereitstellt und die Renderreihenfolge von Unterelementen beeinflusst, wird Stapelkontext genannt.

Der Browser weist dem DOM-Element einen Stacking-Kontext zu, der die folgenden Regeln erfüllt.

• Root-Element (HTML)
• „Positioniertes“ Element (Position: absolut oder relativ) und der angegebene Z-Index-Wert ist nicht automatisch.
• Flex-Element und der angegebene Z-Index-Wert ist nicht automatisch ist kleiner als Elemente von 1
• Elemente, die einen anderen Transformationswert als „none“ angeben
• Elemente, die einen anderen Wert als „normal“ für den Mix-Blend-Modus angeben
• Elemente, die einen anderen Filterwert als „none“ angeben
• Elemente, die eine Isolierung angeben Wert des Isolats
• Im Will-Change-Attribut Das Element, dessen angegebener Wert ein beliebiges Attribut in der obigen Liste ist
• Das Element, dessen -webkit-overflow-scrolling-Wert angegeben ist

z-index

Stapelreihenfolge

entsprechend der DOM-Baumstruktur hat Die Elemente des Stapelkontexts bilden eine Baumstruktur.

• Elemente in einem Stapelkontext werden in der Reihenfolge basierend auf dem Z-Index gestapelt. Das mit dem größeren Z-Index steht an erster Stelle
• Z-Index 0 Elemente, die Stapelreihenfolge der Elemente mit Stapelkontext steht an erster Stelle
• Wenn die oben genannten Bedingungen nicht unterschieden werden können, wird die Reihenfolge im DOM-Baum zur Bestimmung verwendet die Stapelreihenfolge.

Performance

pixel -Rendering -Pipeline. Die Anzahl der durch den Stil berechneten Elemente

Layout

Vermeiden Sie das Auslösen des Layouts so weit wie möglich
• Fast das gesamte Layout erfolgt im Rahmen des gesamten Dokuments.
  • Verwenden Sie Flexbox, um das alte Layoutmodell zu ersetzen.
  • Vermeiden Sie das Auftreten erzwungener synchroner Layoutereignisse
  Verbessern Sie die Zeichenebene von beweglichen Elementen oder Verlaufselementen. Reduzieren Sie den Zeichenbereich. Vereinfachen Sie die Komplexität des Zeichnens )
• Browser passen Selektoren von rechts nach links an, daher sollten spezifischere Bedingungen nach Möglichkeit am rechten Ende platziert werden.
  • Vermeiden Sie die Verwendung von *-Regeln.
    • Selektoren sollten so kurz wie möglich sein.
    • Fügen Sie keine Qualifizierer vor ID-Selektoren ein. Bitte besuchen Sie:
    Programmierung Erste Schritte
    • ! !

Das obige ist der detaillierte Inhalt vonEine ausführliche Erläuterung erweiterter Funktionen wie Priorität und Stacking-Kontext in CSS vermittelt Ihnen ein tieferes Verständnis von CSS! !. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!