feer.cc

V1

2022/11/20阅读:24主题:全栈蓝

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中没有内容,并且即便我添加了一个内容,整个视图也是红色的

这个时候你只需要在html上设置一个背景颜色,这个状态就会消失

希望根据这两个例子能够说明html和body的差异,当然,这个差异在javascript中也比较明显

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

html vs body[1]

Reference

[1]

参考文章: https://css-tricks.com/html-vs-body-in-css/

分类:

前端

标签:

前端

作者介绍

feer.cc
V1

微信公众号:FE情报局