CSS中HTML和Body到底有什麼區別？「前端每日一題v22.11.20」

FE情報局發表於2022-11-25
CSSHTML前端每日一題

CSS中HTML和Body到底有什麼區別？「前端每日一題v22.11.20」

背景

在我們日常的開發中，經常會把一些樣式寫在body上，比如頁面的最小寬度，最小高度，以及初始化的一些屬性

如果body上不生效，我們常用的做法就是再往html上寫一份，但是這兩個具體的區別有哪些，其實作為我們來說通常是不關心的，畢竟對我們日常開發來說，沒有任何的影響，無非就是多加一個

作為一個開發人員，對於事物的瞭解不能只停留在表層，這篇文章將結合例項，瞭解這兩者具體的區別，以及一些屬性設定在html和body上的區別，優缺點，日常開發我們應該怎麼處理這些css

Html和Body

先看一下最基本的HTML文件結構

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

我們都知道，一個html文件的最頂層的標籤是html標籤，然後從html開始，下面有head和body兩個子標籤。從這裡看，那是不是我們選擇器選到html就OK了？

確實是這樣，選擇到html就相當於是根元素，那可能就有人問了，css中不是還有個:root偽類麼？root其實指代的就是文件元素的根元素，那對html來說其實就是html元素，所以它們兩個是等價的，但是:root優先順序更高

:root {

}
html {

}

問題

既然html是根元素，那是不是我們就應該將全域性樣式寫在html上？畢竟這樣的話所有的子元素都能夠繼承html上面的樣式，這樣body可以繼承，body下面的元素也能繼承

實際上，下面這幾個屬性在規範上最初是給到body的

  • background
  • background-color
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • font

這些屬性源頭來自body，那麼我們應該將這些屬性設定在body上，而不是html上

那這樣是不是就代表我們應該把全域性樣式放在body上？

也不是，分情況，比如下面的情況更適合放在html上

事例

1. 專案中使用rem

當你專案中使用rem作為基本單位的時候，這個時候rem的基準為根元素字型大小，所以你需要將字型大小設定在html上

2. 背景顏色

css中有一個奇怪的點，那就是在body上設定背景顏色會鋪滿整個螢幕，不論你的內容是否鋪滿整個螢幕，舉個例子

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body{
      background-color: red;
    }
  </style>
</head>
<body>
  <h1>FE情報局</h1>
</body>
</html>

這種情況下我的整個檢視都是紅色的，即使我body中沒有內容，並且即便我新增了一個內容，整個檢視也是紅色的

這個時候你只需要在html上設定一個背景顏色，這個狀態就會消失

希望根據這兩個例子能夠說明html和body的差異，當然，這個差異在javascript中也比較明顯

  • html: document.rootElement
  • body: document.body

html vs body

相關文章