Hintergrund-Farbe von BODY-Tag auf das ganze HTML angewendet

Ich bin verwirrt über die Größe des Body-Tags in HTML.Hintergrund-Farbe von BODY-Tag auf das ganze HTML angewendet

Ich habe einen harten Code wie folgt:

body{ 
     padding: 0px; 
     height: 100px; 
     background-color: #e5e5e5; 
    }

Warum alle auf der Seite Hintergrund Abdeckung

<body> 

</body>

?, ich es nur 100px decken dachte sollte,

Bitte erläutern Sie diese für mich, danke für deine Hilfe!

Quelle

2013-07-23 ThiepLV

Ich verstehe nicht, warum dies Stimmen Aufstehen? Ich verstehe die Frage auch nicht wirklich. Du hast gefragt, warum es nicht die ganze Seite abdeckt, aber du hast das selbst beantwortet, indem du gesagt hast, du hättest ihm eine Höhe von 100px gegeben? Es macht genau das, was Sie ihm gesagt haben? Sie könnten die Hintergrundfarbe auf das HTML-Tag setzen, aber @ashnisshahs Antwort unten wird (sollte) auf Ihre Bedürfnisse eingehen. – seemly

@seemly: Es gab eine ungültige Bearbeitung der Frage, Sie können Fragengeschichte sehen, das OP fragt, warum Hintergrund tatsächlich auf der ganzen Seite angewandt wurde. –

@seemly, versuchen Sie und verstehen Sie die Frage. Er möchte fragen, warum die Bg-Farbe auf die ganze Seite angewendet wird. Ehrlich gesagt, antwortet aashnisshah's nicht auf die Frage und es weicht von der Antwort ab, die die OP-Leute wünschen. – AnaMaria

Diese in der Tat confusi ist ng, aber es ist in der CSS-2.1-Spezifikation, Klausel 14.2 Background angegeben: Wenn der berechnete Wert ist transparent und der berechnete Wert von background-image ist none für das Element html (wie Dinge sind standardmäßig), müssen Browser stattdessen den berechneten Wert verwenden der Hintergrundeigenschaften für das Element body und darf keinen Hintergrund für body (d. h mach es transparent). Das heißt, body Hintergrund magisch dreht sich um html Hintergrund, wenn html fehlt ein eigener Hintergrund - und dies betrifft nur die Hintergrundeigenschaften, nicht die wahre Höhe des Elements body.

Ich habe keine Gründe für diese seltsame Regel gesehen, die eine Art "umgekehrte Vererbung" vorschreibt. Aber es ist klar in CSS 2.1 spezifiziert und von Browsern angewendet.

Wie in anderen Antworten, können Sie Ihre Inhalte einen Hintergrund bestimmter Höhe haben machen können entweder durch einen Hintergrund auf html Einstellung (so dass body Hintergrund wirklich nur auf body angewandt wird) oder durch Verwendung von Wrapper-Elemente innerhalb body und Höheneinstellung darauf (da die Sonderregel nur für body gilt).

Dank Anne van Kesteren, die auf die CSS-Spezifikation darauf, wenn ich dazu in der WHATWG Mailing-Liste gefragt. (Ich dachte, ich CSS wusste 2.1 von Herzen, aber wirklich nicht. ☺)

Quelle

2013-07-23 18:15:20

Dies ist die einzig wahre Antwort und Erklärung des wahren Grundes des Problems. Diese Antwort sollte die akzeptierte sein! –

auch irgendwann vor 2009 wurde dieses Verhalten anders für HTML und XHTML-Dokumente angegeben, und alter Browser diese Weise verhalten, aber dann wurde die Spezifikation geändert: https://groups.google.com/forum/#!topic/mozilla .dev.tech.css/HLBSyyITk_w –

@Jukka Vielen Dank, ich gelesen, aber ich verstand nicht, was Leinwand ist !, können Sie mir erklären? – ThiepLV

Der Body ist ein spezielles HTML-Tag und deckt normalerweise die gesamte HTML-Seite ab. Versuchen Sie Folgendes:

<body> 
    <div id="content"> 
     Content goes here 
    </div> 
</body>

und die CSS zu begleiten, es wäre:

body{ 
    /* whatever body related codes you'd like to use go here */ 
} 

#content{ 
    padding: 0px; 
    height: 100px; 
    background-color: #e5e5e5; 
}

Quelle

2013-07-23 09:46:39 aashnisshah

hier die Höhe des 'body' Element gehen auf 100px gesetzt, und die Frage war, warum ihr Hintergrund noch auf die gesamte Seite angewendet wird. –

Das 'body' Element * deckt das Viewport normalerweise nicht ab. Der Hintergrund Problem ist der Spezialfall separat in der CSS 2.1-Spezifikation beschrieben: http://www.w3.org/TR/CSS21/colors.html#background –

Sie explizit eine background color for the html tag (als Browser automatisch hinzufügen), andernfalls den Hintergrund der body angeben sollten ist über das ganze Dokument verteilt.

Quelle

2013-07-23 09:50:39 YardenST

Diese doesa die „Warum“ Frage nicht beantworten. –

Körper wird wie html behandelt (weil es die grafische Darstellung des Dokuments enthält, html enthält andere Sachen:), also wenn nicht ausdrücklich ein css-Attribut auf gesetzt wird es wie die ganze Seite – YardenST

Das scheint, was passiert, aber was ist die Erklärung oder Entschuldigung in HTML oder CSS-Spezifikationen? Dies geschieht nur mit dem Hintergrund. Wenn Sie z. B. einen Rahmen für "Körper" festlegen, wird dieser um das Feld des Elements "Körper" gezeichnet. –

Viele Webentwickler verstehen nicht den Unterschied zwischen der Anwendung von Stil auf das Körperelement im Vergleich zum HTML-Element. Meistens wenden diese Autoren Stil nur auf das Körperelement an; Wenn das nicht ausreicht, werden alle Arten von Stilen in HTML und Body gespammt, bis die Seite korrekt aussieht.

Die Verwirrung ist verständlich. Am Anfang wurden beide ähnlich behandelt, mit Attributen wie Hintergrundfarbe, die auf das Body-Tag angewendet wurde und die gesamte Seite betrifft.

EDIT: Sache zu vereinfachen, habe ich eine Geige zu zeigen, wie die Hintergrundfarbe wird applied.So hinzugefügt, wenn Sie die Hintergrundfarbe für den Körper angeben und DONT wollen es die ganze Seite verbreiten Sie angeben müssen die Hintergrundfarbe für HTML zu

FIDDLE

CSS

html{ 
    background-color:yellow; 
} 
body{ 
     padding: 0px; 
     height: 100px; 
     background-color: red; 
    }

Quelle

2013-07-23 09:59:44 AnaMaria

Dies beantwortet nicht die Frage (warum der 'Körper'-Hintergrund auf die ganze Seite angewendet wird). –

@ JukkaK.Korpela, Manchmal sind triviale Dinge wie diese am besten unerklärt. Wenn wir jetzt anfangen, Erklärungen zu geben für "warum wird Tee am besten heiß serviert?", Würden wir es nicht bis zum Ende des Tages schaffen, oder? Nur Spaß, Kumpel. Offen gesagt, ich weiß es nicht. :) – AnaMaria

Hintergrund-Farbe von BODY-Tag auf das ganze HTML angewendet

Antwort

Verwandte Themen