在css中我们经常会用到
html,body{}这种写法，但常常忽略 html 与 body 之间的区别
在css中，<html> 和 <body> 的区别往往被忽略，全局样式或者定义在html上，或者 body 上，实际上两者是有区别的
html和body的关联
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
-
标准定义：<html> 是文档的根元素，<head> <body> 是 <html> 唯一的两个元素
-
规范：<head> 与 <body> 是兄弟元素，也是需要加以区别的元素
html 和 body是父子关系，在html文档中，:root 选择符对应 html元素
:root {
}
html {
}
提示: :root 选择符的优先级大于html选择符
哪些全局样式应用到 html
1.rem
html {font-size: 62.5%}
body {font-size: 1.4rem} /*14px*/
h1 {font-size: 2.4rem} /*24px*/
2.background-color
-
古怪的background-color将background-color应用到body以后，即便body里面的元素没有占满视口，背景颜色也会蔓延到整个视口 -
解决办法：给html设置background-color 设置 height: 100% 可以解决这个问题
如果body及其子元素的高度需要设置为窗口高度，那么html元素上也需要添加
html {height: 100%}
应用到 body 上的全局样式
早期规范中，<body> 有以下行内属性:
| iniline attribute | |
|---|---|
| background | background |
| bgcolor | background/background-color |
| marginleft/margintop | margin-left/margin-top |
| text | font |
总结:
除了css中存在区别，JavaScript中同样也存在区别。 例如：document.documentElement 对应 HTML， document.body 对应 body