Zusammenfassung allgemeiner CSS-Eigenschaften

******* Allgemeine CSS-Eigenschaften *********

z-index:

automatisch (Standard)

Ruft die Stapelreihenfolge von Objekten ab oder legt sie fest.

Bei parallelen Objekten gilt: Je größer der Wert dieses Attributparameters, desto höher wird er oben gestapelt.

Wenn dieses Attribut zweier Objekte den gleichen Wert hat, werden sie entsprechend der Reihenfolge, in der sie im HTML-Dokument fließen, kaskadiert, und das später geschriebene überschreibt das vorherige.

Der Wert des Positionsattributs muss als „Absolute |“ definiert werden, damit dieser Wert wirksam wird. Die entsprechende Skriptfunktion von

ist zIndex.

-------------------------------------- --- -------------------------------- --- ----------

clip: Den sichtbaren Bereich des Objekts abrufen oder festlegen. Die Teile außerhalb des Bereichs sind transparent.

Der Wert der Position muss auf absolut gesetzt sein, damit dieses Attribut verwendet werden kann.

auto: Kein Beschneiden des Objekts

rect(|auto |auto |auto |auto): Basierend auf oben-rechts-unten -left Die Reihenfolge liefert vier Offsetwerte, die von der oberen linken Ecke des Objekts für die Koordinate (0,0) berechnet werden. Jeder dieser Werte kann durch auto ersetzt werden, das heißt, diese Kante wird nicht ersetzt abgeschnitten.

Zuschneiden in der oberen linken Ausrichtung: Beginnen Sie mit dem Zuschneiden von 0, bis der eingestellte Wert, d. h. der automatische Wert in der oberen linken Ausrichtung, gleich 0 ist;

Zuschneiden in der rechten -Untere Ausrichtung: Beginnen Sie mit der Einstellung. Der Wert wird bis zum äußersten rechten und unteren Rand abgeschnitten, d. h. der rechte untere automatische Wert ist die tatsächliche Breite und Höhe des Felds

Beispiel: Abschneiden: rect(auto 50px 20px auto)

Hinweis: Die Oberseite wird nicht abgeschnitten, die rechte Seite wird ab dem 50. Pixel ganz nach rechts abgeschnitten, die Unterseite wird ab dem 20. abgeschnitten Pixel nach unten, und die linke Seite wird nicht abgeschnitten

inset(|auto |auto |auto |auto): Diese Beschneidungsmethode ähnelt rect(). Der Unterschied ist Beschneiden von inset(). Jede Ausrichtung wird in Bezug auf die Grenze der Ausrichtung beschnitten.

Zuschneiden in der Richtung oben-rechts-unten-links: Beginnen Sie mit dem Zuschneiden von 0, bis der eingestellte Wert, d. h. der automatische Wert der Richtung oben-rechts-unten-links, gleich 0 ist (CSS3 )

------------------------------------- -------- ------------------------------------------ -------- ---------------

position: Rufen Sie die Positionierungsmethode des Objekts ab.

statisch: Das Objekt folgt dem regelmäßigen Fluss. Eigenschaften wie oben, rechts, unten und links werden nicht angewendet.

relativ: Das Objekt folgt dem normalen Fluss und beeinflusst keine Elemente im normalen Fluss, wenn es entsprechend seiner Position im normalen Fluss durch die Attribute oben, rechts, unten und links versetzt wird. Kaskaden werden über das Z-Index-Attribut definiert.

absolut: Das Objekt löst sich vom regulären Fluss und verwendet die Attribute „oben“, „rechts“, „unten“, „links“ und andere für die absolute Positionierung. Die versetzte Position der Box hat keinen Einfluss auf irgendein Element im regulären Fluss Der Rand kollabiert nicht mit anderen Rändern. Seine Kaskade wird durch das Z-Index-Attribut definiert.

behoben: Das Objekt bricht aus dem regulären Fluss ab und verwendet die Attribute „oben“, „rechts“, „unten“, „links“ und andere, um es mit dem Fenster als Referenzpunkt zu positionieren. Wenn die Bildlaufleiste angezeigt wird, wird das Objekt nicht gescrollt . IE6 und niedriger unterstützen diesen Parameterwert nicht

center: Das Objekt wird vom regulären Fluss getrennt und Attribute wie oben, rechts, unten und links werden verwendet, um die Position oder Größe des Felds anzugeben. Die Box ist vertikal und horizontal innerhalb ihres enthaltenden Behälters zentriert. Die versetzte Position der Box wirkt sich nicht auf Elemente im regulären Fluss aus, ihre Ränder werden nicht mit anderen Rändern reduziert und ihre Kaskadierung wird durch das Z-Index-Attribut definiert. (CSS3)

Seite: Die Position der Box wird absolut berechnet. (CSS3)

------------------------------------------------ - ------------------------------------------------- - ------------------------

Marge

h2{margin:10px 0;}

Ruft die erweiterten Ränder auf den vier Seiten des Objekts ab oder legt sie fest.

Wenn alle vier Parameterwerte angegeben sind, werden die vier Seiten in der Reihenfolge oben, rechts, unten und links angewendet.

Wenn nur einer angegeben ist, wird dieser für alle vier Seiten verwendet.

Wenn zwei vorhanden sind, ist das erste für oben und unten und das zweite für links und rechts.

Wenn drei vorhanden sind, ist das erste für oben, das zweite für links und rechts und das dritte für unten.

Inline-Objekte können dieses Attribut verwenden, um die äußeren Patches auf der linken und rechten Seite festzulegen. Wenn Sie die äußeren Patches auf der oberen und unteren Seite festlegen möchten, müssen Sie das Objekt zunächst als Blockebene oder festlegen Inline-Blockebene.

Erweiterte Ränder sind immer transparent.

Einige benachbarte Ränder werden zusammengeführt, was wir Randfaltung nennen

---------------- ----- --------------------------------------------- ----- ----------------------------------

Aspekt -ratio

: Geben Sie das Verhältnis an

Definieren Sie das Verhältnis der Breite und Höhe des sichtbaren Bereichs der Seite im Ausgabegerät.

Diese Funktion akzeptiert Min- und Max-Präfixe, sodass zwei Medienfunktionen, Min-Aspect-Ratio und Max-Aspect-Ratio, abgeleitet werden können.

@media screen and (aspect-ratio:1680/957){ … }

@import url(example.css) screen and (max-aspect-ratio:20/11);

------------- -------------------------------------------------- ------

Hintergrund:

[Hintergrundfarbe]: Geben Sie die Hintergrundfarbe des an Objekt.

[Hintergrundbild]: Geben Sie das Hintergrundbild des Objekts an. Es kann ein echter Bildpfad oder ein mithilfe von Farbverläufen erstelltes „Hintergrundbild“ sein.

[background-repeat]: Gibt an, wie das Hintergrundbild des Objekts angeordnet und gefüllt wird.

[Hintergrundanhang]: Geben Sie an, ob das Hintergrundbild des Objekts mit dem Objektinhalt scrollt oder fixiert ist.

[Hintergrundposition]: Geben Sie die Hintergrundbildposition des Objekts an.

[Hintergrund-Ursprung]: Geben Sie den Ursprung der Hintergrundbildanzeige des Objekts an.

[Hintergrundclip]: Geben Sie den Bereich an, in dem das Hintergrundbild des angegebenen Objekts nach außen beschnitten wird.

[Hintergrundgröße]: Geben Sie die Größe des Hintergrundbilds des Objekts an.

-------------------------------------- --- ----------------------------------

Hintergrundanhangseinstellung oder Abrufen, ob das Hintergrundbild mit dem Objektinhalt scrollt oder fixiert ist. Zuerst muss das Attribut „Hintergrundbild“ angegeben werden.

fixed: Das Hintergrundbild ist relativ zum Formular fixiert.

Scrollen: Das Hintergrundbild ist relativ zum Element fixiert, was bedeutet, dass das Hintergrundbild beim Scrollen des Elementinhalts nicht scrollt, da das Hintergrundbild immer dem Element selbst folgt. Es wird jedoch mit dem Vorgängerelement oder der Vorgängerform des Elements gescrollt.

lokal: Das Hintergrundbild ist relativ zum Elementinhalt fixiert, was bedeutet, dass beim Scrollen des Elements mit dem Element auch das Hintergrundbild mitscrollt, da das Hintergrundbild immer dem Inhalt folgt. (CSS3)

------------------------------------------------ - ------------------------------------------------- - ---------------------------------------

background-clip gibt den Bereich an, in dem das Hintergrundbild des Objekts nach außen abgeschnitten wird.

padding-box: Beschneiden Sie den Hintergrund außerhalb des Polsterbereichs (ohne Polsterung).

border-box: Beschneiden Sie den Hintergrund nach außen vom Randbereich (ohne Rand).

content-box: Beschneiden Sie den Hintergrund vom Inhaltsbereich nach außen.

Text: Beschneiden Sie die Form des Vordergrundinhalts (z. B. Text) als Zuschneidebereich nach außen, sodass Sie einen Maskierungseffekt erzielen können, z. B. indem Sie den Hintergrund als Füllfarbe verwenden.

-------------------------------------- --- -------------------------------- --- ---------

Hintergrundwiederholung: Wie wäre es mit dem Setzen oder Abrufen das Hintergrundbild eines Objekts. Legen Sie die Füllung an. Zuerst muss das Attribut „Hintergrundbild“ angegeben werden.

ermöglicht die Bereitstellung von 2 Parametern. Wenn alle 2 Parameter bereitgestellt werden, ist der erste für die Querformatausrichtung und der zweite für die Hochformatausrichtung.

Wenn nur 1 Parameter angegeben wird, wird dieser für Quer- und Hochformat verwendet. Mit Ausnahme der Sonderwerte „repeat-x“ und „repeat-y“ ist „repeat-x“ äquivalent zu „repeat no-repeat“, und „repeat-y“ entspricht „repeat-no-repeat“, d. h. „repeat-x“ und „repeat-y“ sind äquivalent zur Bereitstellung von zwei Parameterwerten. Die entsprechende Skriptfunktion von

ist backgroundRepeat.

repeat-x: Das Hintergrundbild wird horizontal gekachelt

repeat-y: Das Hintergrundbild wird vertikal gekachelt

repeat: Das Hintergrundbild wird kachelt horizontal und vertikal

no-repeat: Das Hintergrundbild ist nicht gekachelt

rund: Das Hintergrundbild skaliert automatisch, bis es passt und den gesamten Container ausfüllt. (CSS3)

Raum: Das Hintergrundbild wird im gleichen Abstand gekachelt und füllt den gesamten Container oder eine bestimmte Richtung aus. (CSS3

-------------------------------------------------- ------------ -------------------------------------

Hintergrundposition: Legen Sie die Hintergrundbildposition des Objekts fest oder rufen Sie sie ab.

Wenn vier angegeben sind, muss jedes angegeben werden mit einem vorangestellten Schlüsselwort (das heißt, links | Mitte | rechts | oben | unten), der Versatz ist relativ zur Position des Schlüsselworts

Beispiel: Angenommen, Sie möchten das Hintergrundbild definieren unten rechts im Container sein und der Abstand rechts bzw. unten 20 Pixel betragen.

: Geben Sie die Position der Hintergrundbildfüllung als Prozentsatz an.

: Geben Sie die Position der Hintergrundbildfüllung als negativen Wert an >Mitte: Zentrieren Sie das Hintergrundbild horizontal und vertikal.

Links: Das Hintergrundbild wird von links in horizontaler Richtung gefüllt die horizontale Richtung.

oben: Das Hintergrundbild wird in vertikaler Richtung gefüllt

unten: Das Hintergrundbild beginnt in vertikaler Richtung >-------------- ---------------------------------- --------------

Hintergrundursprung: Legen Sie den Referenzursprung (Position) fest oder rufen Sie ihn ab, wenn Sie die Hintergrundposition des Hintergrundbilds des Objekts berechnen .

Padding-Box: Zeigt das Hintergrundbild beginnend mit dem Padding-Bereich (einschließlich Padding) an.

border-box: Zeigt das Hintergrundbild ausgehend vom Randbereich (einschließlich Rand) an.

Inhaltsfeld: Zeigt das Hintergrundbild ab dem Inhaltsbereich an.

-------------------------------------- --- ------

Das Obige ist die Zusammenfassung allgemeiner CSS-Eigenschaften. Weitere verwandte Inhalte finden Sie unter PHP chinesische Website (www.php .cn)!