CSS gründliche Recherche (2)-CSS-Tutorial-php.cn

CSS gründliche Recherche (2)

黄舟

Freigeben： 2016-12-22 16:26:27

Original

1570 Leute haben es durchsucht

CSS gründliche Recherche (2)

Github-Seiten-Blog-Beitrag

1. CSS-Box-Modell

Die Struktur der Box

Marge -Rand- Die Füllstruktur + der Inhalt bilden das Boxmodell.

Hinweis

Breite und Höhe entsprechen der Breite und Höhe des Inhaltsbereichs, ohne den Rand des Füllrands, sondern der tatsächlichen Höhe der Box muss die äußeren drei (Füllungsrand) einschließen

Zuweisungsreihenfolge im Uhrzeigersinn, oben(oben)->rechts(rechts)->unten(unten)->links(links)

- ---top(1)----->||. |left(4) |right(2)| |<---bottom(3)----

Zuweisung, ein Wert, vier Werte sind das alles, wie zum Beispiel Rand: 10px; Zuweisung, zwei Werte, zwei Werte werden oben rechts zugewiesen, also die ersten beiden, dann unten = oben, links = rechte Zuweisung, drei Werte, weisen Sie Werte oben, rechts und unten zu, also den ersten drei, und dann links = rechte Zuweisung, vier Werte, natürlich ...

wird in jedem Browser durch html dargestellt

-equiv="Content-Type" content="text/ html; charset=utf-8" /> Darstellung von in Browser-Entwicklertools

/div>

Die Ränder von Chrome sind rötlich, der Rand hat die Farbe xx (ich kann nicht sagen, welche Farbe er hat) und die Polsterung ist Cyan und Blau . Inhalt

IE10, Win8.1 Browser-Offset, siehe Stackoverflow-Frage, es wird gesagt, dass der Offset nach der Verwendung von relativ absolut geändert wird, genau wie Position

2.border

border: width(2px) color(green) style(dotted/dashed)

border-width/color/style Legen Sie ein bestimmtes Attribut fest border-left: width color style Legen Sie die Attribute auf einer Seite fest zu kombinieren mit Rand - links: gepunktet;

Für FF, Hintergrund = Inhalt + Polsterung + Rand. Achten Sie auf

3.Auffüllung und Rand

Zuweisungsregeln können, wie oben erwähnt, wie folgt zusammengefasst werden: Von oben beginnend im Uhrzeigersinn werden dem ersten N N Werte zugewiesen, und der Rest kann entsprechend kopiert werden nach dem Prinzip der Oben-Unten-Links-Rechts-Paarung bedeutet dies, dass alle vier gleich sind.

Der Körper ist standardmäßig ein Rand von mehreren Pixeln. und der Hintergrund des Körpers wird bis zum Randteil erweitert, der sich in der Nähe des Browsings befindet. Dies ist der Fall für „Hintergrundbild“ und „Hintergrundfarbe“. Der Hintergrund anderer Felder kann nur bis zum Rand reichen (unter FF).

2. Standard-Dokumentfluss

1. Der Standardfluss bezieht sich auf die Anordnungsregeln verschiedener Elemente, wenn keine anderen speziellen CSS-Regeln für die Anordnung und Positionierung verwendet werden.

Elemente auf Blockebene, typischerweise div, ul, li, werden immer in Form eines Blocks ausgedrückt und sind vertikal nacheinander mit Geschwisterblöcken derselben Ebene angeordnet, wobei sie die linke und rechte Seite füllen.

Inline-Elemente umfassen normalerweise ein Tag. Bei horizontaler Anordnung wird das Ende ganz rechts automatisch umbrochen.

Divs können Span-Stile enthalten, aber nicht umgekehrt, d. h. Span kann keine Divs enthalten.

2. Blockabstand

Horizontaler Abstand von Inline-Elementen = Rand rechts vom linken Element + Rand links vom rechten Element

Vertikal Abstand von Elementen auf Blockebene Vertikaler Abstand = max (Rand unten des oberen Elements, Rand oben des unteren Elements) Dies ist das sogenannte Kollapsprinzip. Der kleine Rand wird in den großen Rand kollabiert

Der Rand des verschachtelten Divs und der Rand des untergeordneten Divs werden im Inhaltsbereich des übergeordneten Divs platziert. In einer vernünftigen und idealen Situation ist der Rand tatsächlich auf einen negativen Wert eingestellt Der Abstand zwischen dem Rand und dem äußeren Rand wird auf -50 Pixel eingestellt. Das gesamte Feld wird um 50 Pixel nach links verschoben. Das Obige ist der Inhalt einer gründlichen CSS-Recherche ( 2) Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!