原文地址：HTML vs Body in CSS
<html>和<body>之間的區別很容易被忽略。這似乎是一件小事。必須承認，我有一個壞習慣，把所有全局樣式都應用到<body>，當效果不理想時，我就會不加思考地移到<html>。
然而，還是有區別的，無論我們是 CSS 老手還是新手，都應該意識到它們。我們將在這篇文章中討論這些，並考慮一些實際的應用，他們的差別可能是有意義的。
HTML 和 body 是如何關聯的#
考慮一下基本 HTML 文件的標準結構
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata and such -->
</head>
<body>
<!-- Where the content begins -->
<body>
</html>
規範將<html>定義為文件的根元素，在上面的例子中我們可以清楚地看到：<html>元素是所有其他元素的最頂層。責任就止於此，因為除了可以繼承樣式的級別之外，再沒有別的級別了。
從那裡開始，<head>和<body>構成了直接落在<html>中的兩個元素。事實上，規範直接將<body>與<head>定義為對照，因為這是惟一需要區分的兩個元素。
因此，這裡的底線是<html>是文件的根元素，而<body>是包含在其中的子元素。事實上，在 CSS 中有一個 選擇器。它們的目標完全相同
:root {
}
html {
}
注意: 根具有更高的特異性:(0,0,1,0)vs(0,0,0,1)。
我們應該總是把全局樣式放在<html>上？#
很容易想到我們想要在整個頁面上繼承的任何樣式都應直接應用於<html>，因為它是文件的根元素。<html> 包含了 <body>的職責範圍。
但事實並非如此。事實上，以下代碼的內聯屬性最初在規範中被分配給<body>
- background
- bgcolor
- marginbottom
- marginleft
- marginright
- margintop
- text
雖然這些屬性現在被認為是過時的，但建議使用 CSS 來代替它們對應的 CSS 屬性：
| Inline Attribute | CSS Property |
|---|---|
| background | background |
| bgcolor | background / background-color |
| marginbottom | margin-bottom |
| margintop | margin-top |
| marginleft | margin-left |
| marginright | margin-right |
| text | font |
考慮到這些 CSS 屬性來源於為<body>編寫的內聯屬性，它們也應該直接應用於 CSS 中的<body>，而不是將它們推入<html>元素中，這似乎是合適的。
我們應該總是把全局樣式放在<body>上？#
嗯，不完全是。可能在某些情況下，將樣式應用於<html>更有意義。讓我們考慮其中的幾個場景。
使用 rem 單位#
rem 單位相對於文件根。例如，當寫這樣的東西時
.module {
width: 40rem;
}
rem 單位相對於<html>元素的字體大小，該元素是文件根。因此，在根級別設置為用戶默認值的是 .module 類將伸縮到的值。
Jonathan Snook 有一篇經典的文章，很好地說明了如何設置<html>的字體大小為百分比，當使用 rem 單位時，可以將其用作重置。
古怪的背景顏色#
在 CSS 中有一個奇怪的事情，<body>上的背景色淹沒了整個視口，即使元素本身的度量並沒有覆蓋整個區域。除非在 html 元素上設置了背景色，否則不會。
如果不想要整個視口是目標，那麼將其設置在 HTML 元素上可能是很明智的。
總結#
希望這能讓大家了解在 CSS 中<html>和<body>使用之間的關鍵區別。JavaScript 也有區別。例如，你不需要查詢，html 是文件。rootElement 和 body 是 document.body。
我們當然可以在這兩者之間畫出更多的技術區別，但這裡的重點是提高我們的理解，以便在編寫 CSS 時做出更好的決策。
你有其他的例子，它更有意義的樣式一個比另一個？或者也許你有一套不同的標準，知道什麼時候設計一個？請在評論中告訴我們。