CSS中HTML和Body到底有什么区别？「前端每日一题v22.11.20」
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/