在 CSS 中，<html> 和 <body> 的區(qū)別往往被忽略，全局樣式或者定義在 <html> 上，或者定義在 <body> 上。實際上，兩者是有區(qū)別的，不論是 CSS 老鳥還是新手，都應(yīng)該了解。
HTML 和 Body 如何關(guān)聯(lián)
Html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata and such -->
</head>
<body>
<!-- Where the content begins -->
<body>
</html>
根據(jù)
標準定義，<html> 是文檔的根元素，<head>、<body> 是 <html> 唯一的兩個子元素。按照
規(guī)范，<head> 才是和 <body> 相對照、需要加以區(qū)別的元素。
因此，<html> 和 <body> 是父子關(guān)系。在 HTML 文檔中，:root
選擇符對應(yīng) <html> 元素。
Html代碼
:root {
}
html {
}
需要注意的是，:root 選擇符（偽類）的
優(yōu)先級大于 html 選擇符：(0, 0, 1, 0) vs (0, 0, 0, 1)。
哪些全局樣式應(yīng)該應(yīng)用在 HTML
Html代碼
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem; /* =14px */
}
h1 {
font-size: 2.4rem; /* =24px */
}
古怪的 background-color
CSS 中有一些古怪的行為，將 background-color 應(yīng)用到 <body> 以后，即便 <body> 里的元素沒有占滿視口，背景顏色也會
蔓延到整個視口。
給 html 設(shè)置 background-color 可以解決這個問題。
height: 100%
如果 <body> 及其子元素的高度需要設(shè)置為窗口高度時，<html> 元素上也需要添加：
Html代碼
html,
body {
height: 100%;
}
哪些全局樣式應(yīng)該應(yīng)用在 Body
早期的
規(guī)范中，<body> 有以下行內(nèi)屬性：
background
bgcolor
marginbottom
marginleft
marginright
margintop
text
這些行內(nèi)屬性對應(yīng)的 CSS 樣式應(yīng)該應(yīng)用在 <body>。
Inline AttributeCSS Property
background
backgroundbgcolor
backgroundbackground-colormarginbottom
margin-bottommarginleft
margin-leftmarginright
margin-rightmargintop
margin-toptext
font總結(jié)
本文列舉了一些 <html> 和 <body> 在 CSS 中的區(qū)別，在 JavaScript 中同樣存在區(qū)別，例如 html 對應(yīng) document.documentElement、body 對應(yīng) document.body。
了解二者的區(qū)別可以幫助我們更有效的編寫 CSS。歡迎補充。
參考鏈接
MDN reference on <html>MDN reference on <body>via
CSS-Tricks - HTML vs Body in CSS原文：
https://csspod.com/html-vs-body-in-css/本文轉(zhuǎn)自：
CSS: HTML 和 Body 的區(qū)別
