Eine kurze Diskussion über die neuen Funktionen von CSS3: mehrspaltiges Layoutmodul

CSS3 hat ein neues mehrspaltiges Layoutmodul (Multi-column Layout Module) hinzugefügt, das hauptsächlich beim mehrspaltigen Layout von Text verwendet wird.

Mehrspaltig kann unterteilt werden in:

①Anzahl der Spalten und Spaltenbreite: Spalte -count, Spaltenbreite, Spalten

column-count: Der Wert ist eine positive Ganzzahl ohne Einheit und gibt die Anzahl der Spalten für die Klassifizierung mit mehreren Spalten an auto (Anzahl der Spalten, bestimmt anhand der Spaltenbreite und anderer Parameter). IE unterstützt dieses Attribut nicht. Unter Firefox und Webkit müssen Sie die Präfixe -moz und -webkit hinzufügen.

column-width: Gibt die Spaltenbreite von Multi-column an. Die Einheit ist px oder em, es kann jedoch keine negative Zahl sein wird durch andere Parameter wie z. B. „column-count“ bestimmt). IE unterstützt dieses Attribut nicht, aber Opera11+ unterstützt es. Unter Firefox und Webkit müssen die Präfixe -moz und -webkit hinzugefügt werden.

Spalten: Kombinieren Sie die Attribute „Spaltenbreite“ und „Spaltenanzahl“. Dieser Abkürzungsmodus wird nur unter Webkit und Opera unterstützt, nicht unter Firefox.

Wenn Spaltenbreite und Spaltenabstand gleichzeitig festgelegt werden, wird die tatsächliche Spaltenbreite entsprechend der Spaltenlücke angepasst und entspricht möglicherweise nicht der eingestellten Spaltenbreite Wert.

Wenn die eingestellte Spaltenbreite größer als die Breite des Elementcontainers ist, wird der Elementinhalt nicht entsprechend der Spaltenbreite angeordnet und der Container wird nur unterbrochen Reduzieren Sie die Spaltenbreite auf die Breite des Containers.

Um die Spalten an verschiedene Bildschirmgrößen anzupassen, ist es am besten, eine genaue Spaltenbreite oder Spaltenanzahl festzulegen und zugehörige Attribute entsprechend anzugeben, wie z. B. Breite, Spalten- Lücke, Spalte des Elements -Regelbreite usw. Wenn Spaltenlücke, Spaltenregelbreite Standardwerte verwenden, ist es am besten, die Werte von Spaltenlücke, Spaltenbreite und Spaltenanzahl klar zu schreiben mehrspaltige Designs.

②　Spaltenabstand und Spaltenstil: Column-Gap, Column-Rule-Color, Column-Rule -style, columns-rule-width, columns-rule

Im spaltenübergreifenden Layout entspricht Column-Gap dem Abstand zwischen zwei Spalten, ähnlich wie margin The Die Spaltenregel entspricht einer Trennlinie, ähnlich einer Grenze. Column-Gap und Olumn-Rule haben Höhen, und ihre Höhe entspricht der Höhe der Spalte. Der größte Unterschied besteht darin, dass Column-Gap keinen Stil hat und einen bestimmten Abstand zwischen den Spalten einnimmt, während Column-Rule einen hat Bestimmter Stil. Ähnlich wie bei Rändern gibt es Stile.

Die Spaltenabstandseinheit ist px oder em, darf aber keine negative Zahl sein. Der Standardwert ist normal (1em). IE unterstützt dieses Attribut nicht, aber Opera11+ unterstützt es. Unter Firefox und Webkit müssen die Präfixe -moz und -webkit hinzugefügt werden.

Obwohl Column-Gap verwendet werden kann, um den Abstand zwischen benachbarten Spalten zu ändern, ist die Summe aus Column-Gap und Column die Summe von Column-Gap und Column, wenn die Column-Width für mehrere Column-Elemente gleichzeitig festgelegt wird -width Wenn es größer als die Gesamtbreite mehrerer Elementspalten ist, werden die Spalten aufgeteilt und in der ersten Spalte angezeigt. Zu diesem Zeitpunkt wird die Spaltenbreite automatisch an die Gesamtbreite der Elemente angepasst.

column-rule hat auch ähnliche Eigenschaften wie border: width columns-rule-width (Standardwert ist mittel), style columns-rule-style (Standardwert ist none), color columns -rule-color, der Unterschied besteht darin, dass der Rand eine bestimmte räumliche Position einnimmt, während die Spaltenregel keine räumliche Position einnimmt. Eine Erhöhung der Spaltenregelbreite hat keinen Einfluss auf das Layout der Spalte, sondern erweitert sie nur auf beide Seiten des Elements.

③　Spaltenumbrüche: Pause-vorher, Pause-nachher, Pause-innen

Derzeit werden nur sehr wenige Browser unterstützt und werden noch nicht eingeführt.

④　Spalte füllen: Spaltenfüllung

Derzeit gibt es nur sehr wenige unterstützte Browser, daher werden wir sie noch nicht vorstellen.

⑤　Spaltenübergreifend: Column-Span

column-span wird hauptsächlich verwendet, um zu definieren, wie viele Spalten die Unterelemente in einem Spaltenelement umfassen können. Manchmal ist es notwendig, dass ein bestimmter Inhalt oder Titel nicht in irgendwelche Spalten unterteilt wird, sondern sich über alle Spalten erstreckt. In diesem Fall ist das Attribut „column-span“ erforderlich. Der Standardwert ist „none“, was bedeutet, dass er keine Spalte umfasst; „all“ bedeutet, dass er sich über alle Spalten erstreckt. Die einzigen derzeit unterstützten Browser sind Safari, Chrome und Opera11+. Unter Webkit ist das Präfix -webkit erforderlich.

.multiColumns {
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
	-moz-column-gap: 30px;
	-webkit-column-gap: 30px;
	column-gap: 30px;
}
.multiColumns h1 {
	background: red;
	-webkit-column-span: all;
	column-span: all;
}

Verwandte Empfehlungen:

Layoutplan – mehrspaltiges Layout

HTML-CSS-Mehrspaltenlayout

Über mehrspaltiges Layout

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die neuen Funktionen von CSS3: mehrspaltiges Layoutmodul. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!