共计 1285 个字符，预计需要花费 4 分钟才能阅读完成。
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