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

FE情報局 發表於 2022-11-25
前端 CSS

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

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中沒有內容,並且即便我新增了一個內容,整個檢視也是紅色的

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

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

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

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

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

html vs body