2013-07-23 20 views
12

Jestem zdezorientowany wielkością znacznika body w html.Kolor tła znacznika BODY zastosowanego do całego HTML

Mam trudny kod w następujący sposób:

<body> 

</body> 

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

Dlaczego tło pokrywa wszystkie strony ?, myślałem powinno obejmować wyłącznie 100px,

proszę wyjaśnić dla mnie, dziękuję za pomoc!

+1

Nie rozumiem, dlaczego to się podnoszą głosy? Naprawdę nie rozumiem też tego pytania. Pytasz, dlaczego nie obejmuje on całej strony, ale sam odpowiedziałeś, mówiąc, że podałeś mu wysokość 100 pikseli? Robi dokładnie to, co kazałeś mu zrobić? Możesz umieścić kolor tła na tagu HTML, ale odpowiedź @ aashnisshah poniżej (powinna) zaspokoić Twoje potrzeby. – seemly

+1

@seemly: była nieprawidłowa edycja pytania, możesz zobaczyć historię pytań, OP pyta, dlaczego tło zostało w rzeczywistości zastosowane do całej strony. –

+1

@seemly, spróbuj zrozumieć pytanie. Chce zapytać, dlaczego kolor Bg zostanie zastosowany do całej strony. Szczerze mówiąc, aashnisshah's nie odpowiada na pytanie i odbiega od tego, co odpowiedź OP seek's – AnaMaria

Odpowiedz

17

to rzeczywiście confusi ng, ale jest określona w specyfikacji CSS 2.1, klauzula 14.2 Background: jeśli obliczona wartość background-color to transparent, a obliczona wartość background-image to none dla elementu html (ponieważ rzeczy są domyślnie), przeglądarki muszą zamiast tego używać wartości obliczonej właściwości tła dla elementu body i nie może renderować tła dla body (tj. uczynić go przezroczystym). Oznacza to, że tło zmienia się magicznie na html, jeśli html nie ma własnego tła - a to wpływa tylko na właściwości tła, a nie na prawdziwą wysokość elementu body.

Nie widziałem żadnego uzasadnienia dla tej dziwnej zasady, która nakazuje rodzaj "odwrotnego spadku". Ale jest to wyraźnie określone w CSS 2.1 i stosowane przez przeglądarki.

Jak wyjaśniono w innych odpowiedzi, można dokonać zawartość ma tło określonej wysokości albo przez ustawienie tła na html (tak, że body tło jest rzeczywiście stosowana tylko body) lub za pomocą elementu otoki wewnątrz body i ustalania wysokości na nim (ponieważ specjalna reguła dotyczy tylko body).

Dziękuję Anne van Kesteren, która wskazała specyfikację CSS, gdy zapytałem o to na liście adresowej WHATWG. (Myślałem, że znam CSS 2.1 na pamięć, ale tak naprawdę nie) 01)

+2

Jest to jedyna prawdziwa odpowiedź i wyjaśnienie prawdziwej przyczyny problemu. Ta odpowiedź powinna być zaakceptowana! –

+1

W pewnym momencie przed 2009 r. Zachowanie to zostało określone inaczej w przypadku dokumentów HTML i XHTML, a stare przeglądarki zachowywały się w ten sposób, ale zmieniono specyfikację: https://groups.google.com/forum/#!topic/mozilla .dev.tech.css/HLBSyyITk_w –

+0

@Jukka Dziękuję, czytam, ale nie rozumiem, co to jest płótno!, możesz mi to wyjaśnić? – ThiepLV

2

Ciało jest specjalnym tagiem HTML i zwykle pokrywa całą stronę HTML. Spróbuj wykonać następujące czynności:

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

i CSS towarzyszyć byłoby:

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

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

Tutaj wysokość elementu 'body' jest ustawiona na 100px, a pytanie brzmiało, dlaczego jego tło jest nadal stosowane do całej strony. –

+1

Element 'body' * nie * zwykle obejmuje obszar ekranu. Problem w tle to specjalny przypadek opisany osobno w specyfikacji CSS 2.1: http://www.w3.org/TR/CSS21/colors.html#background –

1

Należy wyraźnie określić background color for the html tag (jak przeglądarek automatycznie dodać go), w przeciwnym razie tło z body jest rozłożony na całym dokumencie.

+2

Nie odpowiada to na pytanie "dlaczego". –

+0

Ciało jest traktowane jak html (ponieważ jest to graficzne przedstawienie dokumentu, html zawiera inne rzeczy:

), więc jeśli nie zostanie jawnie ustawione atrybut css na , będzie on działał jak cała strona – YardenST

+1

Tak się wydaje, ale co się dzieje jest wyjaśnienie lub wymówka w specyfikacjach HTML lub CSS? Dzieje się tak tylko w tle. Np. Jeśli ustawisz obramowanie na "ciele", zostanie ono narysowane wokół ramki elementu 'body'. –

2

Wielu twórców stron internetowych nie rozumie różnicy między stosowaniem stylu do elementu body a elementem html. Przez większość czasu autorzy ci stosują styl tylko do elementu ciała; gdy to nie wystarczy, będą spamować różne style zarówno html, jak i treści, dopóki strona nie będzie wyglądać poprawnie.

Zamieszanie jest zrozumiałe. Na początku oba były traktowane podobnie, a atrybuty takie jak kolor tła były stosowane do znacznika body, wpływając na całą stronę.

EDIT: Aby uprościć rzeczy dodałem skrzypce demonstrować, jak background-color dostaje applied.So jeśli określić kolor tła dla ciała i DONT ma to rozprzestrzenił się na całej stronie należy podać tło kolor dla HTML zbyt

FIDDLE

CSS

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

To nie odpowiada na pytanie (dlaczego tło 'body' jest stosowane do całej strony). –

+0

@ JukkaK.Korpela, Czasami takie trywialne rzeczy najlepiej pozostawić niewyjaśnione. Teraz, jeśli zaczniemy podawać wyjaśnienia "dlaczego herbata jest najlepiej podana na gorąco?", Nie dotrwalibyśmy do końca dnia, prawda? Po prostu żartuję kolego. Szczerze mówiąc, nie wiem. :) – AnaMaria