[英]What is the difference between applying css rules to html compared to body?
我看不出兩者之間的區別：
html {
background: #f1f1f1;
}
和
body {
background: #f1f1f1;
}
有什么解釋嗎？
沒有真正的區別（如果您只是在談論在哪里應用background ，否則BoltClock 對另一個問題的回答更合適）。 html是一個元素，就像body一樣。
兩者都是有效的選擇，並且都適用於所有常見的瀏覽器。
例如，YUI 重置選擇在html元素而不是body上設置background ：
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
根元素的背景變成了 canvas 的背景，並且它的背景繪制區域擴展到覆蓋整個 canvas，盡管任何圖像的大小和位置都相對於根元素，就好像它們是單獨為該元素繪制的一樣。 （換句話說，背景定位區域被確定為根元素。）如果根的'background-color'值為'transparent'，則畫布的背景顏色取決於UA。 根元素不再繪制此背景，即其背景的使用值是透明的。
和：
For documents whose root element is an HTML HTML element [HTML401] or an XHTML html element [XHTML11]: if the computed value of 'background-image' on the root element is 'none' and its 'background-color' is 'transparent '，用戶代理必須改為從該元素的第一個 HTML BODY 或 XHTML body 子元素傳播背景屬性的計算值。 該 BODY 元素的背景屬性的使用值是它們的初始值，並且傳播的值被視為在根元素上指定了它們。 建議 HTML 文檔的作者為 BODY 元素指定 canvas 背景，而不是 HTML 元素。
這里展示了那堵文字牆所說的內容：
body background ： http://jsfiddle.net/hhtzE/html和body的background ： http://jsfiddle.net/hhtzE/1/background html : http://jsfiddle.net/hhtzE/2/html 是 body 的父級。 查看差異的一種方法是：
html {
overflow: scroll;
}
body {
overflow: scroll;
}
您會看到有兩組嵌套的滾動條，一組屬於 html，另一組屬於 body。
雖然body和html通常可以同等對待，但它們並不是一回事。 body可以具有邊距、填充和邊框，並且可以相對於html元素移動。 我有時會使用正文邊距和填充在淺色背景上制作一個白色“頁面”，它的打印效果與外觀相同。
看這個小提琴一個簡單的例子，顯示兩者可以有不同的背景 colors。
相關的 CSS 正如我在 nomulous 的回答中所評論的那樣：
html {
background-color: #ffffc0;
}
body {
padding: 2em;
margin: 2em;
background-color: white;
border: 1px solid black;
}
還有:root元素，因為並非所有瀏覽器（cough.ie.cough）都將html元素視為 DOM 的根。
有人在這里寫總是 100% 的高度，但這不是真的！
嘗試做（在FF4上測試）：
html{
background:yellow;
}
body{
background:red;
height:100px;
}
<body>顏色僅在<html>沒有設置顏色時影響<html>顏色。 這里最煩人的事情是當<body>有顏色而<html>沒有時，某些瀏覽器版本會遇到最后一個直接子塊元素有邊距的問題。 顏色將在元素之后被剪切，邊距將是<html>顏色。 設置<html>顏色時總是如此。
另一方面，當設置<html>背景時， <body>可以有例如邊距。 這簡直是一團糟。
迄今為止的最佳實踐是將背景顏色、fonts 等應用於兩者。 每次你都會寫：
body{}
將其更改為：
body,html{}
不要在<body>和<html>上使用任何 CSS box-model 屬性（或完全不修改，只是為了安心）。 創建內部元素（寬度可能為 100%）並改為使用它。
通常根本不應該有任何區別，因為這些元素都應該占據整個屏幕。 這就像在其他 div 中有一個 div。 但我認為設置 body 標簽的樣式更正確，因為 html 並不是布局的一部分。
將 CSS 應用於 html、body 和通用選擇器的區別 *?
[英]Difference in applying CSS to html, body, and the universal selector *?
設置全局CSS屬性時，html，body和*之間有什么區別
[英]What is the difference between html, body and * when setting global CSS Properties
HTML：其中的文本（區別）的目的是什么 <textarea> 元素與占位符屬性中的元素相比？
[英]HTML: what's the purpose of (difference between) text within <textarea> element compared to (and) that in the placeholder attribute?
與內聯樣式相比，使用 HTML 屬性/標簽是否存在性能差異？
[英]Is there a performance difference between using HTML attributes/tags compared to inline styles?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.