Ich habe festgestellt, dass eine übliche Technik darin besteht, ein generisches Container-Div in der Wurzel des Body-Tags zu platzieren:
<html>
<head>
...
</head>
<body>
<div id="container">
...
</div>
</body>
</html>
Gibt es einen triftigen Grund dafür? Warum kann das CSS nicht einfach auf das Body-Tag verweisen?
Antworten:
Das Container-Div und manchmal das Content-Div werden fast immer verwendet, um ein komplexeres CSS-Styling zu ermöglichen. Das Body-Tag ist in gewisser Hinsicht etwas Besonderes. Browser behandeln es nicht wie ein normales Div. Seine Position und Abmessungen sind an das Browserfenster gebunden.
Aber ein Container-Div ist nur ein Div und Sie können es mit Rändern und Rändern stylen. Sie können ihm eine feste Breite geben und mit zentrieren margin-left: auto; margin-right: auto.
Außerdem können Inhalte, wie z. B. ein Copyright-Hinweis, außerhalb des Container-Bereichs angezeigt werden, jedoch nicht außerhalb des Körpers, sodass Inhalte außerhalb eines Rahmens zulässig sind.
Mit dieser Methode können Sie Ihren gesamten Inhalt flexibler gestalten. Erstellen Sie effektiv zwei Container, die Sie stylen können. Das HTML-Body-Tag, das als Hintergrund dient, und das div mit der ID eines Containers, der Ihren Inhalt enthält.
Auf diese Weise können Sie Ihren Inhalt innerhalb der Seite positionieren und gleichzeitig einen Hintergrund oder andere Effekte ohne Probleme gestalten. Denken Sie daran als "Rahmen" für den Inhalt.
Die häufigsten Gründe für mich sind:
Ich weiß, dass dies eine alte Frage ist, aber ich habe dieses Problem selbst bei der Neugestaltung einer Website gelöst. Troy Dalmasso brachte mich zum Nachdenken. Er macht einen guten Punkt. Also fing ich an zu sehen, ob ich es ohne Container div zum Laufen bringen könnte.
Ich könnte, wenn ich die Breite des Körpers einstelle. In meinem Fall auf 960px.
Dies ist die CSS, die ich benutze:
html {
text-align:center;
}
body {
margin: 0 auto;
width: 960px;
}
Dadurch werden die Inline-Blöcke, die ebenfalls eine feste Breite haben, schön zentriert.
Hoffe, das ist für jeden von Nutzen.
Dies ist eine der größten schlechten Gewohnheiten von Front-End-Codierern.
Alle Antworten über mir sind falsch. Der Körper nimmt eine Breite, Ränder, Ränder usw. an und sollte als anfänglicher Container fungieren. Das HTML-Element sollte wie beabsichtigt als Hintergrund-Canvas fungieren. Auf Dutzenden von Websites, die ich erstellt habe, musste ich nur einmal ein Container-Div verwenden.
Ich wäre bereit zu sein, dass dieselben Codierer, die Container-Divs verwenden, auch ihr Markup mit Divs innerhalb von Divs verunreinigen - überall sonst.
Tu es nicht. Verwenden Sie divs sparsam und streben Sie ein schlankes Markup an.
- = - = - UPDATE - Ich bin mir nicht sicher, was mit SO falsch ist, da ich diese Antwort von vor 5 Jahren bearbeiten kann, aber ich kann nicht auf die Kommentare antworten, da darin steht, dass ich 50 Wiederholungen benötige, bevor ich dies tun kann. Dementsprechend werde ich meine Antwort zu den hier eingegangenen Antworten hinzufügen. - = - = -
Ich habe dies erst Jahre nach meiner Antwort gefunden und sehe, dass es einige Folgeantworten gibt. Und sicher scherzen Sie?
Die installierte Platzhalter-Site, die Sie für meine Domain gefunden haben und von der ich nie behauptet habe, sie sei mein Markup oder Styling oder die sogar in meinem Beitrag erwähnt wurde, war ganz klar eine grundlegende CMS-Installation mit nicht einem Wort Inhalt (so viel wurde auf der Homepage gesagt). Das war nicht mein Markup und Styling. Das war die Silverstripe-Standardvorlage. Und ich nehme keine Anerkennung dafür. Es ist jedoch vielleicht eines von nur zwei Beispielen, die ich mir vorstellen kann, dass ein Container-Div erforderlich wäre.
Beispiel 1: Eine generische Vorlage für Unbekannte. In diesem Fall wurde eine Standard-CMS-Vorlage angezeigt, die Divs innerhalb von Divs innerhalb von Divs enthielt.
Der Horror.
Beispiel 2: Ein dreispaltiges Layout, damit die Fußzeile richtig gelöscht wird (ich denke, dies war wahrscheinlich das Szenario, in dem ich ein Container-Div benötigte, das schwer zu merken ist, weil es vor Jahren war.)
Ich habe gerade ein Thema für meine Domain erstellt (noch nicht fertiggestellt) und mit dem Laden von Inhalten begonnen. Klicken Sie auf den Link, um dieses leicht zu erreichende Beispiel für semantisches Markup zu erhalten.
Ehrlich gesagt bin ich verblüfft, dass die Leute denken, Sie brauchen tatsächlich einen Container-Div und beginnen mit einem, bevor Sie überhaupt nur einen Körper ausprobieren. Der Körper, wie ich ihn einmal von einem der ursprünglichen Autoren der CSS-Spezifikation erklärt hörte, war als "anfänglicher Container" gedacht.
Markup sollte nach Bedarf hinzugefügt werden, nicht weil Sie es so gesehen haben.
body > div#BgContainer > div#Containerscheint zu widersprechen, aber vielleicht ist das das einzige Mal von Dutzenden. PS Ich habe nicht abgelehnt, ich bin ehrlich neugierig, eine dieser rein semantischen Sites zu sehen, von denen ich immer wieder höre.
html { font-family: sans-serif; }zum Beispiel die ganze Zeit, um das HTML-Element zu formatieren. Wie bereits erwähnt, funktioniert dies jedoch für bestimmte CSS-Eigenschaften in älteren Browsern nicht.
div-Tags werden verwendet, um die Webseite so zu gestalten, dass sie für die Benutzer oder das Publikum der Website optisch ansprechend aussieht. Durch die Verwendung von container-div in HTML wird die Website professioneller und attraktiver und daher möchten mehr Menschen Ihre Seite erkunden.
Gut,
Das Container-Div ist sehr gut zu haben, denn wenn Sie möchten, dass die Site zentriert wird, können Sie es einfach nicht nur mit body oder html tun ... Aber Sie können es mit divs. Warum Container? Es wird normalerweise verwendet, nur weil der Code sauber und lesbar sein muss. Das ist also Container ... Es enthält alle Websites, falls Sie damit herumspielen möchten :)
Viel Glück
Die meisten Browser verwenden standardmäßig die Größe einer Webseite. Manchmal wird die Seite in einem anderen Browser nicht gleich angezeigt. Durch die Verwendung des Benutzers kann also für ein bestimmtes HTML-Element geändert werden. Beispielsweise kann der Benutzer Rand, Größe, Breite, Höhe usw. eines bestimmten HTML-Tags hinzufügen.