Frage Hintergrundfarbe zum Körper geben, der ganze Seite anwendet. Warum?


body {
  background-color: red;
}
<body>
  <div>Hello World!</div>
</body>

Also die background-color: red; gilt für die gesamte Seitenhöhe, aber wenn ich die Seite inspiziere, ist die Höhe des Körpers nur bis zu div enthalten Hallo Welt!.

Jemand bitte erklären Sie, warum es so passiert.


5
2018-06-01 06:52


Ursprung


Antworten:


Der Hauptgrund ist, weil die HTML nimmt die background-color von BODY schon seit:

Der Hintergrund des Wurzelelements wird zum Hintergrund des   Leinwand und deckt die gesamte Leinwand [...]

Also seit dem Standard background-color von HTML ist transparent es wird den einen nehmen BODY. Jedoch eine Farbe auf beide anwenden HTML und BODY Elemente werden Sie sehen, dass die BODY Hintergrund deckt nicht mehr die ganze Seite ab.

html {
  background-color: blue;
}

body {
  background-color: red;
}
<html>

<body>
  <div>Hello World!</div>
</body>

</html>

Der Hintergrund des Wurzelelements wird zum Hintergrund des   Leinwand und deckt die gesamte Leinwand, verankert (für    background-position) am gleichen Punkt wie es wäre, wenn es wäre   nur für das Wurzelelement selbst gemalt. Das Wurzelelement nicht   Male diesen Hintergrund noch einmal.

Bei HTML-Dokumenten empfehlen wir jedoch, dass Autoren die URL angeben   Hintergrund für die BODY Element und nicht die HTML Element. Zum   Dokumente, deren Wurzelelement ein HTML- "HTML" -Element oder ein XHTML-Element ist   "html" -Element, das Werte von berechnet hat transparent zum    background-color und none zum background-imagemüssen Benutzeragenten   Verwenden Sie stattdessen den berechneten Wert der Hintergrundeigenschaften von diesem   elements erstes HTML "BODY" Element oder XHTML "body" Element Kind wenn   Hintergrund für die Leinwand malen und keinen Hintergrund malen   für dieses Kindelement. Solche Hintergründe müssen auch bei der   der gleiche Punkt wie sie wären, wenn sie nur für die Wurzel gemalt wären   Element.

Von W3 - 14 Farben und Hintergründe.


5
2018-06-01 07:31



es ist eigentlich ziemlich logisch. Als erstes <html> und <body> Tags sind erforderliche Tags in einer Webseite. Bei dem die <html> Das Tag enthält alle <html> Code der <body> Das Tag enthält alle Inhalte.

Betrachten Sie diese Standardstruktur für ein Basic HTML Dokument:

<!DOCTYPE html>
<html lang="en">

  <head>
    <!-- Metadata and such -->
  </head>

  <body>
    <!-- Where the content begins -->
  <body>

</html>

Die Spezifikation definiert als das Wurzelelement eines Dokuments, und wir können deutlich sehen, dass im obigen Beispiel: das Element die oberste Ebene aller anderen Elemente ist. Das Geld bleibt dort stehen, weil es keine weiteren Ebenen mehr gibt, von denen Stile vererbt werden können.

Von dort, und bilden die einzigen zwei Elemente, die direkt hinein fallen. Tatsächlich definiert die Spezifikation direkt im Gegensatz dazu, da dies die einzigen zwei Elemente sind, die unterschieden werden müssen.

Die untere Zeile hier ist also das Wurzelelement eines Dokuments, 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 sie angewendet werden sollten <html> weil es das Wurzelelement des Dokuments ist. <html> ersetzt <body> in der Hierarchie, so folgt, dass es alle globalen Stile enthalten muss.

Aber das ist nicht genau der Fall. In der Tat wurden Inline-Attribute für die folgenden ursprünglich zugeordnet <body> in der Spezifikation:

  • Hintergrund
  • bgfarbe
  • Randbottom
  • marginleft
  • Randrecht
  • Margintop
  • Text

Die Hintergrundfarbe

Da ist eine komische Sache drin CSS bei dem die background-color auf <body> überflutet das gesamte Ansichtsfenster, selbst wenn die Metriken des Elements nicht den gesamten Bereich abdecken. Es sei denn, die background-color wird auf das html-element gesetzt, dann nicht.

Wenn Überschwemmung das Ziel ist, kann es schlau sein, es einfach auf die html Element zu Beginn mit.


2
2018-06-01 07:40



Höhe, die Sie in Inspect sehen min-height Das ist das Element der gleichen Höhe div, Hintergrundfarbe ändern max-height Das ist gleich 100% seiner Eltern (html).

Beispielsweise:

Veränderung min-height und laufe inspizieren und sehe das Ergebnis:

body {
   background-color: red;
   min-height: 200px;
}
<div>Hello World!</div>

Also, Sie sehen Höhe in Inspect Change 200px; Aber rote Farbe ganze Seite abdecken.


1
2018-06-01 07:13



.some{

    background-color: red;

}
<div class="some">Hello World!</div>

Probieren Sie es aus, als ob Sie dem Körper Farbe geben würden


1
2018-06-01 06:54



Body bedeutet alle Seiten, die im Browser angezeigt werden. 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;
}

0
2018-06-01 06:56



CSS-Tricks haben einen verwandten Beitrag Verknüpfung . Es scheint, dass Body Styles zu HTML erweitert werden, weil:

html ist das Wurzelelement eines Dokuments, in dem der Körper ein Abkömmling ist   darin enthalten. Tatsächlich gibt es einen: root-Selektor in CSS. Diese   Ziel genau die gleiche Sache


0
2018-06-01 07:10