乐趣区

关于前端:CSS中HTML和Body到底有什么区别前端每日一题v221120

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

退出移动版