Das Tag <div> ist ein leerer Container, der eine Abteilung oder einen Abschnitt definiert. Es hat keinen Einfluss auf den Inhalt oder das Layout und wird verwendet, um HTML-Elemente, die mit CSS gestylt oder mit Skripten bearbeitet werden sollen, zu gruppieren.
Das Tag <div> ist ein Block-Level-Element, so wird ein Zeilenumbruch vor und nach ihm gesetzt.
Sie können jedes HTML-Element innerhalb des Tages <div> einschließlich eines weiteren Tages <div> platzieren.
Um die Stile innerhalb eines Absatzes anzuwenden, verwenden Sie das Tag <span>, das mit den Inline-Elementen verwendet wird.
Syntax
Das Tag <div> wird gepaart verwendet. Der Inhalt muss zwischen den Start- (<div>) und Endtags (</div>) geschrieben werden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Das Tag <div> </title>
</head>
<body>
<h1> Das Tag <div> </h1>
<div style="background-color:#8ebf42">
<p>Wir verwenden das Tag <div> um zwei Absätze zu gruppieren, um dem Text einen Hintergrund zu geben und die Farbe zum
<span style="color:#1c87c9">Wort</span> durch das Tag <span> hinzuzufügen.</p>
<p> Achten Sie darauf, dass das Tag <div> ein Block-Level-Element ist, also ein Zeilenumbruch vor und nach dem gesetzt werden muss.</p>
</div>
</body>
</html>Ergebnis
Durch das Tag <div> positionierte Blöcke
Wenn wir Layouts erstellen, haben wir mit mehreren Blöcken, die durch das Tag <div> definiert sind, zu tun. Die Positionierung dieser Blöcke steht im Mittelpunkt des Layouts: Die Platzierung der Elemente an den richtigen relativen Positionen über alle Bildschirmgrößen hinweg ist eine der wichtigsten Aufgaben.
Abhängig vom Inhalt und den Zielen der Seite können wir verschiedene Techniken (oder deren Kombinationen) verwenden, um den Ort jedes Blocks zu bestimmen. Lassen Sie uns mehr über diese Techniken erfahren.
Flexbox ¶
In modernen Webseiten werden Float-basierte Layouts durch Flexbox ersetzt. Die Grundidee hinter Flexbox ist, dass Sie mit ihr die Ausrichtung, Richtung, Reihenfolge und Größe der Artikel im Container steuern können.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: center; /* Verwenden Sie einen anderen Wert, um das Ergebnis zu sehen. */
width: 300px;
height: 300px;
background-color: #1c87c9;
}
.flex-container > div {
width: 120px;
padding: 5px 0;
margin: 5px;
background-color: lightgrey;
text-align: center;
font-size: 35px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>Ergebnis
CSS-Float-Eigenschaft ¶
CSS float Eigenschaft, oder "floats" erlaubt, die Elemente nebeneinander oder getrennt voneinander darzustellen, wodurch wir verschiedene Arten von Layouts erstellen können, einschließlich mehrspaltiger Seiten, Sidebars, Grids usw.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.content {
overflow: auto;
border: 3px solid #666666;
}
.content div {
padding: 10px;
}
.content a {
color: darkblue;
}
.blue {
float: right;
background: #1c87c9;
}
.green {
float: left;
background: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>Das ist ein Absatz innerhalb des Tages div.</p>
<a href="#">Das ist ein Hyperlink innerhalb des Tages div.</a>
<ul>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
</ul>
</div>
<div class="green">
<p>Das ist ein Absatz innerhalb des Tages div.</p>
<ol>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
</ol>
</div>
</div>
</body>
</html>Ergebnis
Negative Margins ¶
Negative Margin kann sowohl auf statische als auch auf schwebende Elemente angewendet werden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.content div {
padding: 2%;
}
.content a {
color: darkblue;
}
.main-content {
width: 30%;
margin-left: 32%;
}
.blue {
width: 25%;
margin-top: -10%;
background: #1c87c9;
}
.green {
width: 20%;
margin: -35% auto auto 70%;
background: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="main-content">
<a href="#">Das ist ein Absatz innerhalb des Tages div.</a>
</div>
<div class="blue">
<p>Das ist ein Absatz innerhalb des Tages div.</p>
<a href="#">Das ist ein Hyperlink innerhalb des Tages div.</a>
<ul>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
</ul>
</div>
<div class="green">
<p>Das ist ein Absatz innerhalb des Tages div.</p>
<ol>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
</ol>
</div>
</div>
</body>
</html>Ergebnis
Relative+absolute Positionierung ¶
Wenn Sie div zu einem bestimmten Element relativ positionieren möchten, können Sie eine Kombination aus Position: position: relative und position: absolute. verwenden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.content {
position: relative;
height: 400px;
border: 1px solid #666666;
}
.content div {
position: absolute;
padding: 10px;
}
.content a {
color: darkblue;
}
.blue {
right: 20px;
bottom: 0;
background: #1c87c9;
}
.green {
top: 10px;
left: 15px;
background: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>Das ist ein Absatz innerhalb des Tages div.</p>
<a href="#">Das ist ein Hyperlink innerhalb des Tages div.</a>
<ul>
<li>Irgendein Listeneintrag.</li>
<li>Irgendein Listeneintrag.</li>
</ul>
</div>
<div class="green">
<p>Das ist ein Absatz innerhalb des Tages div.</p>
<ol>
<li>Irgendein Listeneintrag.</li>
<li>Anderer Listeneintrag.</li>
</ol>
</div>
</div>
</body>
</html>Ergebnis
Attribute ¶
| Attribut | Wert | Beschreibung |
|---|---|---|
| align | left right center justify |
Es wurde verwendet, um den Inhalt innerhalb des Tags <div> anzupassen. Dieses Attribut wird in HTML5 nicht unterstützt. Stattdessen können Sie die CSS-Eigenschaft text-align verwenden, um Attribute anzupassen. |
Das Tag <div> unterschtützt Globale Attribute und Globale Eventhandler.
Browser-Support
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Übe dein Wissen
