Warum wird die ganze Seite mit einer Hintergrundfarbe gefüllt?
body {
background-color: red;
}<body>
<div>Hello World!</div>
</body>So gilt die background-color: red; auf ganze Seitenhöhe, aber wenn ich die Seite der Höhe des Körpers inspizieren ist nur bis zum div enthält Hallo Welt!.
Jemand bitte erklären Sie, warum es so geschieht.
Der Hauptgrund ist, weil die HTML die background-color von BODY da nimmt:
Der Hintergrund des Wurzelelement wird den Hintergrund der Leinwand und deckt die gesamte Leinwand [...
]
So, da der Standard-background-color von HTML ist transparent es wird den einen von BODY nehmen. Wenn Sie jedoch eine Farbe auf die Elemente HTML und BODY anwenden, sehen Sie, dass der Hintergrund BODY nicht mehr die gesamte Seite abdeckt.
html {
background-color: blue;
}
body {
background-color: red;
}<html>
<body>
<div>Hello World!</div>
</body>
</html>Der Hintergrund des Wurzelelement wird der Hintergrund der Leinwand und deckt die gesamte Leinwand, verankert (für
background-position) an der gleichen Stelle, wie es, wenn es wäre, wurde nur für das Wurzelelement selbst gemalt. Das Wurzelelement nicht wieder diesen Hintergrund malen.Für HTML-Dokumente empfehlen wir jedoch, dass Autoren den Hintergrund für das Element
BODYanstelle des ElementsHTMLangeben. Für Dokumente, deren Wurzelelement ist ein HTML „HTML“ Element oder ein XHTML „html“ Element, das sich von dem Werten vontransparentfürbackground-colorundnonefürbackground-image, Benutzerprogramme müssen stattdessen den berechneten Wert der Hintergrundeigenschaften berechnet hat Elements erstes HTML "BODY" -Element oder XHTML "body" -Element Kind, wenn Malerei Hintergründe für die Leinwand, und darf keinen Hintergrund für dieses Kind-Element malen. Solche Hintergründe müssen auch an dem gleichen Punkt verankert sein, an dem sie nur für das Wurzelelement gezeichnet würden.
.some{
background-color: red;
}<div class="some">Hello World!</div>dies versuchen, als wenn Sie Farbe Körper die ganze Webseite geben
Ich frage den Grund, warum Ganzkörper/Seite bg rot wird, auch wenn die Höhe des Körpers ist nicht diese Höhe –
der Standard ist die ganze Seite, der normale Bildschirm Höhe und Breite Ihres Bildschirms – Exprator
Körper bedeutet, alle Seite, die im Browser angezeigt werden gefärbt sein. Du willst also nur div Farbe geben. Du kannst entweder eine ID oder eine Klasse verwenden, um diesem Tauchgang einen Stil zu geben. wie in der ersten Antwort.
<body>
<div class="some">Hello World!</div>
</body>
.some{
background-color: red;
}
oder
<body>
<div id="some">Hello World!</div>
</body>
#some{
background-color: red;
}
CSS Tricks hat einen Zusammenhang mit Post in Verdienst link. Es scheint, dass Körperarten sind erweitert, um html, weil:
html das Stammelement eines Dokuments ist, wo Körper ein Nachkomme ist darin enthalten. Tatsächlich gibt es einen: root-Selektor in CSS. Diese Ziel genau das gleiche
Höhe Sie in inspizieren sehen ist
min-height, die gleiche Höhe des Elements istdiv, Hintergrund-Farbänderungmax-height, der gleich 100% seiner Eltern (html).
Beispiel:
Änderung min-height und laufen inspizieren und sehen Ergebnis:
body {
background-color: red;
min-height: 200px;
}<div>Hello World!</div>Also, Sie sehen Höhe in inspizieren ändern
200px;Aber Farbe rote Abdeckung ganz p Alter.
es ist eigentlich ziemlich Logik. Zuallererst und <body> Tags sind erforderliche Tags in einer Webseite. Wenn das <html>-Tag den gesamten <html>-Code enthält, enthält das <body>-Tag den gesamten Inhalt.
Betrachten Sie diese Standardstruktur für ein grundlegendes HTML Dokument:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata and such -->
</head>
<body>
<!-- Where the content begins -->
<body>
</html>
Die Spezifikation definiert als Stammelement eines Dokuments, und wir können in dem obigen Beispiel deutlich sehen, dass: das Element die oberste Ebene ist von allen anderen Elementen. Das Geld bleibt dort stehen, weil es keine weiteren Ebenen mehr gibt, von denen Stile vererbt werden können.
Von dort aus, und bilden die einzigen zwei Elemente, die direkt im Inneren fallen. Tatsächlich definiert die Spezifikation direkt im Gegensatz dazu, da dies die einzigen zwei Elemente sind, die unterschieden werden müssen.
Also die unterste Zeile hier ist, dass das Wurzelelement eines Dokuments ist, in dem ein Abkömmling enthalten ist. Tatsächlich gibt es einen: root-Selektor in CSS. Diese zielen genau das gleiche ab.
Es ist verlockend zu denken, dass alle Stile, die wir auf der ganzen Linie vererben wollen, direkt auf <html> angewendet werden sollten, da es das Wurzelelement des Dokuments ist. ersetzt <body> in der Hierarchie. Daraus folgt, dass es alle globalen Stile enthalten muss.
Aber das ist nicht der Fall. In der Tat, Attribute Inline für die folgenden wurden ursprünglich <body> in der Spezifikation zugeordnet:
Die background-color
Es ist eine seltsame Sache in CSS wo die background-color auf <body> sogar das ganze Ansichtsfenster flutet, wenn die Metriken des Elements selbst, dass die gesamte Fläche nicht abdecken. Wenn das background-color nicht auf das HTML-Element gesetzt wird, dann nicht.
Wenn Überschwemmung das Ziel ist, kann es klug sein, es einfach auf das html Element zu setzen, um damit zu beginnen.
weil Sie Hintergrund nur für Körper angewendet haben – AVI
Das ist, was ich fragen. Die Höhe des Körpers ist nicht die gesamte Seite, aber bg Farbe gilt für die Höhe der gesamten Seite –
Mögliche Duplikat von [Hintergrundfarbe des BODY-Tags auf den gesamten HTML-Code angewendet] (https://stackoverflow.com/questions/ 17806691/background-color-of-body-tag-angewendet-auf-das-ganze-html) – AVI