Detaillierte Einführung in CSS-Positionierungsattribute (mit Beispielen)

Vorwort: Bei der Verwendung von CSS zum Layouten und Verschönern der Seite wird häufig das Positionsattribut verwendet. Als nächstes werden wir das Positionsattribut im Detail vorstellen.

Empfohlenes Video-Tutorial: CSS-Video-Tutorial

Schreiben wir zunächst eine HTML-Datei und verwenden Sie CSS, um mehrzeilige Inhalte vertikal zu zentrieren.

<div class="wrap">
    <div class="content">
    <h1>hello world</h1>
    <h2>HELLO WORLD</h2>
    <h3>层叠样式表</h3>
    </div>
</div>

Als nächstes verwenden wir CSS für Layout und Schriftsatz:

.wrap{
width:100%;
height:400px;
display:table;
}
.content{
display:table-cell;
vertical-align:table;
text-align:center;
}

Positionsattribut:

-, statische Positionierung/konventionell Positionierung/natürliche Positionierung statisch

Funktion: Positionierung des Elements im natürlichen Fluss

Eigenschaften:

1, oben, unten, links, rechts oder Z-Index-Deklaration ignorieren

2, wenn für zwei benachbarte Elemente Ränder festgelegt sind, dann ist der endgültige Rand Margin = der größte der beiden Ränder

3, ein Element mit festen Breiten- und Höhenwerten. Wenn der linke und der rechte Rand auf „Auto“ eingestellt sind, werden der linke und der rechte Rand automatisch erweitert, um den gesamten Rest einzunehmen Breite, der Effekt ist, dass der Block horizontal zentriert ist

2. Relative Positionierung relativ

Funktion: Machen Sie das Element zu einem positionierbaren Vorfahren Element

Funktionen:

1, Sie können den Oben-/Rechts-/Unten-/Links-/Z-Index für die relative Positionierung verwenden, relative Elemente sind natürlich Position Im Fluss

2 wird die Position relativ positionierter Elemente im natürlichen Fluss beibehalten

3, jedes Element kann eingestellt werden ist relativ, und seine absolut positionierten Nachkommen können absolut relativ dazu positioniert werden

4, und die schwebenden Elemente können versetzt werden (um das Problem der Einstellung von t/r/b für zwei zu lösen schwebende Elemente) /l ungültiges Problem) und steuern Sie ihre Stapelreihenfolge

3. Absolute Positionierung

Funktion: Elemente ausbrechen lassen natürlicher Fluss

Eigenschaften:

1, sich vom natürlichen Fluss lösen

2, eingestellt das prozentuale Verhältnis der Größe Es ist das nächstgelegene positionierbare Vorgängerelement

3 Wenn lrtb auf 0 gesetzt ist, wird es an allen Seiten des nächstgelegenen positionierbaren Vorgängerelements ausgerichtet (abgeleitet von der Trick der horizontalen und vertikalen Zentrierung)

4, Wenn es kein aktuelles positionierbares Vorgängerelement gibt, wird es als positionierbares Vorgängerelement betrachtet

5, Z-Index kann die Stapelreihenfolge steuern

4. Feste Positionierung fixiert

Funktion: Ähnlich der absoluten Positionierung

Funktionen:

1, Positionierung relativ zum Browser-Ansichtsfenster

2, Elemente mit fester Positionierung scrollen nicht beim Scrollen des Ansichtsfensters

3, erben Sie die Eigenschaften von absolut

Position verwenden, um Unterelemente vertikal zu zentrieren

<div class="wrap">
    <div class=""content></div>
</div>

.wrap {
	width: 200px;
	height: 200px;
	background: blue;
	position: relative;
}
.content {
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto auto;
}

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in CSS-Positionierungsattribute (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!