Was ist eigentlich das div genau in html?
Wenn ich zum Beispiel 4 div Container im Code habe, ist der erste div Container dann ganz oben und der letzte div Container ganz unten?
5 Antworten
Meinst du div? Dazu findest du alle Infos hier: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
Die Position der Elemente auf der Seite wird durch CSS bestimmt, nicht nur durch die Reihenfolge der HTML Elemente.
Stell dir einen Div Container wie einen Pappkarton vor.
Dieser Karton kann Inhalte haben und wenn du bestimmte Formatierungen und Styles auf die Inhalte anwenden möchtest dann musst du dafür nicht unbedingt jeden intakt einzeln anfassen sondern kannst diese gesammelt auf den Karton anwenden.
Du kannst auch einen Karton in einen anderen Karton stellen ...
Oder mehrere Kartons nebeneinander, das ist dir überlassen, das kannst du handhaben wie es für deine Webseite eben Sinn ergibt.
Es gibt ja viele verschiedene Elemente in html. Das div ist eines davon. Beispielsweise gibt es ja auch h1, p, span, a und viele weitere.
Diese Elemente haben alle gemeinsam, dass sie erstmal nichts weiter als Boxen sind. Vierecke, in die Inhalt rein kommt. Ein paar Sonderfälle wie input ausgenommen, die noch besondere Funktionen erfüllen.
Alle diese Boxen (also Elemente) haben vordefinierte Stile, die bei allen Browsern identisch sind. Will man diese Stile anpassen oder erweitern, macht man das mit dem schon von anderen angesprochenen CSS-Stilen in einer Datei oder auch direkt im Element selbst.
Ein div könnte man als Grundform aller Boxen verstehen, denn die Inhalte (zB. Text) bleiben unverändert. Aber trotzdem hat auch ein div vordefinierte Stile. Zum Beispiel „display: block“. Falls du dich schon mit der Entwickler-Toolbar auseinandergesetzt hast, die mittlerweile jeder Browser hat, kannst du das da nachsehen.
Ein div ist also ein Block-Element. Das bedeutet, es beginnt ganz links auf der Seite und ist immer 100% lang - geht also bis zur rechten Seite. Wie gesagt: Solange man nichts anderes definiert.
Als Gegensatz dazu: Ein span-Element ist was ähnliches, mit dem Unterschied, dass es nicht display: block, sondern display: inline ist. Also ein inline-Element. Das bedeutet, es ist nicht 100% lang, sondern nur so lang wie dessen Inhalt.
Ja halt mal so ganz grob. Ich konnte jetzt nicht ablesen wie weit deine Kenntnisse sind.
Aber du sagst richtig: Wenn sie im Code untereinander stehen, dann ist das erste div des Codes ganz oben und das Letzte ganz unten.
Mit CSS kann man beispielsweise dann die Box verkürzen. Sodass sie dann nur noch zB. 50% der Bildschirmbreite lang ist. Oder 500px. So könnte man dann die Boxen auch nebeneinander anordnen. Oder auch übereinander, versetzt und frei, wie man eben lustig ist.
Das kommt ganz darauf an.
Wenn du sie ineinandergeschachtelt hast, dann sind sie halt ineinander drin.
Auf auf auf, zu zu zu
<div>
<div>
<div>Hallo</div>
</div>
</div>
Wenn du sie nebeneinander (heisst: Auf gleicher Ebene in der HTML-Struktur), dann erscheinen die standardmässig untereinander. HTML definiert aber nur die Struktur, das Aussehen wird mit CSS gemacht. Das kann also mit CSS dann auch wieder anders angeordnet sein.
Auf zu, auf zu, auf zu
<div>
</div>
<div>
Hallo
</div>
<div>
</div>
Container werden vor allem für das Erstellen von Layouts verwendet. Aber halt wie gesagt meist in Kombination mit CSS, sonst sind die Möglichkeiten relativ beschränkt. Wenn sie keinen Inhalt und keinen Style haben, dann sind sie praktisch einfach nichts.
Das div-Tag ist ein Rechteck, das die volle Breite seines Eltern-Elementes einnimmt. Die Höhe wird durch den Inhalt (Text, Bilder) bestimmt.
ist der erste div Container dann ganz oben und der letzte div Container ganz unten?
Ja, wenn du nur div Container hast. Es können darüber, dazwischen und darunter auch andere HTML Elemente sein, etwa Absätze oder Bilder.
Mit CSS kannst du die HTML-Eigenschaften ändern, zum Beispiel die Breite einzelner oder aller div begrenzen, dann passen mehrere nebeneinander oder sogar die Reihenfolge umkehren.
Schau mal hier zum Thema flexbox: