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

CSS 中 HTML 和 Body 到底有什么区别？「前端每日一题 v22.11.20」

在咱们日常的开发中，常常会把一些款式写在 body 上，比方页面的最小宽度，最小高度，以及初始化的一些属性

如果 body 上不失效，咱们罕用的做法就是再往 html 上写一份，然而这两个具体的区别有哪些，其实作为咱们来说通常是不关怀的，毕竟对咱们日常开发来说，没有任何的影响，无非就是多加一个

作为一个开发人员，对于事物的理解不能只停留在表层，这篇文章将联合实例，理解这两者具体的区别，以及一些属性设置在 html 和 body 上的区别，优缺点，日常开发咱们应该怎么解决这些 css

先看一下最根本的 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 的

这些属性源头来自 body，那么咱们应该将这些属性设置在 body 上，而不是 html 上

那这样是不是就代表咱们应该把全局款式放在 body 上？

也不是，分状况，比方上面的状况更适宜放在 html 上

当你我的项目中应用 rem 作为根本单位的时候，这个时候 rem 的基准为根元素字体大小，所以你须要将字体大小设置在 html 上

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 vs body

背景