关于前端: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