應用CSS規則與HTML相比，身體有什麼區別？

我不明白之間的差別：應用CSS規則與HTML相比，身體有什麼區別？

html { 
    background: #f1f1f1; 
}

和

body { 
    background: #f1f1f1; 
}

任何解釋？

來源

2011-07-18 Steve

相關（無論如何，標題）：http://stackoverflow.com/questions/4565942/should-global-css-styles-be-set-on-the-html-element-or-the-body-元素 – BoltClock

html是body的父項。看到差異的一種方法是做：

html { 
    overflow: scroll; 
} 


body { 
    overflow: scroll; 
}

你會看到有兩個嵌套組滾動條，一個屬於HTML和內屬於身體的一個。

來源

2011-07-18 21:23:05 Gazler

我相信，也就是說，高度是不同的（實際瀏覽器窗口高度（html）與文檔高度（body））。不知道這是否會發揮作用W/O JavaScript使用... –

通常應該沒有任何區別，因爲這些元素都應該佔據整個屏幕。這就像在一個其他的div裏面有一個div。但我認爲設計body標籤更爲正確，因爲html不是佈局的一部分。

來源

2011-07-18 21:23:11 fletom

給你的身體一些保證金，你會看到不同。 'html {background-color：green; } body {padding：2em; margin：2em; background-color：yellow; }' –

沒有真正的區別（如果你只是在談論在哪裏申請background，否則BoltClock's answer to this other question是一個更好的選擇）。 html是一個元素，就像body一樣。

兩者都是有效的選擇，兩者都可以在所有常用瀏覽器中工作。

的YUI重置的情況下，選擇設定background的html元素上，而不是body：
http://yui.yahooapis.com/3.3.0/build/cssreset/reset.css

這就需要你在html設定background，比如看到：can't change body background color using CSS reset

參見：http://dev.w3.org/csswg/css3-background/#special-backgrounds

根元素的背景將成爲背景畫布，並且其背景繪畫區域會擴展到覆蓋整個畫布，但是任何圖像的大小和位置均與根元素相似，就好像它們是爲單獨的元素繪製的一樣。（在其他單詞中，背景定位區域的確定與根元素一致。）如果根目錄的「背景顏色」值爲「透明」，則畫布的背景顏色與UA相關。根元素不會再次繪製此背景，即其背景的使用值爲透明。

和：

對於文檔根元素是一個HTML HTML元素[HTML401]或一個XHTML html元素[XHTML11]：如果 '背景圖像' 對所計算的值根元素爲'none'且其 'background-color'爲'transparent'，則用戶代理必須改爲從元素的第一個HTML BODY或XHTML正文子元素傳播背景屬性的計算值。該BODY元素背景屬性的已使用值是它們的初始值，並將傳播的值視爲在根元素上指定的值。建議HTML文檔的作者爲BODY元素指定畫布背景，而不是HTML 元素。

文本的那面牆是說證明什麼位置：

background上只是body：http://jsfiddle.net/hhtzE/
background上html和body：http://jsfiddle.net/hhtzE/1/
background只有html：http://jsfiddle.net/hhtzE/2/

來源

2011-07-18 21:39:52 thirtydot

雖然body和html可以經常被視爲相同，他們是而不是相同的東西。 body可以有邊距，填充和邊框，並且可以相對於html元素移動。我有時使用貼體邊距和填充在淺色背景上製作白色的「頁面」，並且它的外觀與打印相同。

請參閱this fiddle一個簡單的例子顯示兩個可以有不同的背景顏色。

相關的CSS是我在nomulous'回答說：

html { 
    background-color: #ffffc0; 
} 
body { 
    padding: 2em; 
    margin: 2em; 
    background-color: white; 
    border: 1px solid black; 
}

也有:root元素，因爲不是所有的瀏覽器（cough.ie.cough）治療html元素作爲DOM的根。

來源

2011-07-18 22:05:10

如果你願意，你也可以在'html'上加上margin/padding/border。我相信你知道這一點，但你的第二句話可能聽起來像是說你不能那樣做。 – thirtydot

@ thirtydot - 是的，很好的澄清，謝謝。我*不*這樣做，但我* *可以*做到這一點。 –

有人在這裏寫道，總是100％的高度，但它是不正確的！

嘗試做（在FF4測試）：

html{ 
    background:yellow; 
} 
body{ 
    background:red; 
    height:100px; 
}

<body>顏色影響，只有當<html>沒有顏色集<html>顏色。這裏最煩人的是當<body>有顏色，<html>沒有，有些瀏覽器版本會有上一個直接子區塊元素有毛病。顏色將被削減後元素和邊距將爲<html>顏色。顏色設置爲<html>時始終爲真。

另一方面，當設置<html>背景時，<body>可以有例如餘量。這簡直是一團糟。

到目前爲止的最佳做法是將背景顏色，字體等應用於兩者。只要您每一次都能寫：

body{}

將其更改爲：

body,html{}

不要<body>和<html>使用任何CSS盒模型屬性（或離開它未修改所有，只求曾經擁有內心的平靜）。創建內部元素（可能寬度爲100％）並改爲使用它。

來源

2011-07-18 22:16:49

應用CSS規則與HTML相比，身體有什麼區別？

回答

相關問題